Javascript Changing Div Background-Images

Javascript Changing the Background of a Div with Rotating Images

Page 1 of 1

7 Replies - 23819 Views - Last Post: 02 April 2009 - 03:14 PM

#1 Stelios  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 29-September 08

Javascript Changing Div Background-Images

Posted 29 September 2008 - 07:00 PM

Hi to all,

I've got a Javascript which changes the background image of the body by rotating other images. What I want is the script to change the background to a
specific div and not of the whole body section. Since I'm not an expert in Javascript I have Googled a lot but couldn't work it out till now. In other words that I want is to alter/change in the script
the line "...document.body.background=processed[abc].src.." in a way and add ... so that this
script works for a specific div and not only for the whole webpage...

Thanks for any help

St



<script language="Javascript">

var bgimage=new Array()
bgimage[0]="image1.png"
bgimage[1]="image2.bmp"
bgimage[2]="image3.bmp"

var speed=4000

var processed=new Array()
for (i=0;i<bgimage.length;i++){
processed[i]=new Image()
processed[i].src=bgimage[i]
}

var abc=-1
var xtimes=0

function imageback(){
if (xtimes>=5) {
clearInterval (imtrack)
return
}
if (abc<bgimage.length-1)
abc++
else
inc=0
xtimes++
}
document.body.background=processed[abc].src
}

if (document.all||document.getElementById)
window.onload=new Function('imtrack=setInterval("imageback()",speed)')

</script>


Is This A Good Question/Topic? 0
  • +

Replies To: Javascript Changing Div Background-Images

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1200
  • View blog
  • Posts: 7,309
  • Joined: 07-September 06

Re: Javascript Changing Div Background-Images

Posted 29 September 2008 - 08:26 PM

Here is a basic script that can do what you are looking for:
<script>

function t(){
  document.getElementById("te").style.background = "url(CHANGE_BG_IMAGE_URL_HERE)";
}

</script>
<style>
#te{
  background: url(NORMAL_BG_IMAGE_URL_HERE);
}
</style>

<div id="te">
TEst
</div>

<br />
<input type="button" onclick="t()" />


Just create a div/span/whatever that has the css above (you can obviously change it, but it should have some sort of initial default background so the JS doesn't have to change that (tends to work out nicer that way). Then you change the ID that the javascript is using and what is triggering the function (A timeout is being used in the script you posted). After that you set things like you want them and that should work.

Hope that helps.
Was This Post Helpful? 0
  • +
  • -

#3 Stelios  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 29-September 08

Re: Javascript Changing Div Background-Images

Posted 30 September 2008 - 03:42 AM

Thanks BetaWar,

for you reply and your script. I did try it out it seems to work very well, thanks again.

The thing is that in your script you can only change the background picture only with one other picture, and this with a button.

That what I was asking was how to change the background image in a div repeatedly (using also a timeout as in my script) with more than one images, like kind of a slide show, and this effect taking place without pressing a button but by itself...

And furthermore, if possible, I would like to achieve this with the script I have posted just changing it a little bit (if that is not possible a new script that will perform the same function would be also welcomed...)

Thanks for any further help in advance,
I'm trying to achieve this by myself, but till now to no avail...

St
Was This Post Helpful? 0
  • +
  • -

#4 William_Wilson  Icon User is offline

  • lost in compilation
  • member icon

Reputation: 205
  • View blog
  • Posts: 4,807
  • Joined: 23-December 05

Re: Javascript Changing Div Background-Images

Posted 30 September 2008 - 06:41 AM

window.onload = load;

function load()
{
	setInterval("t()",2000); //change every 2 seconds, can be changed.
}


That should be what you are looking for, you will need to make an array of images and either cycle through them or pick them at random when the function is called. I'll let you take a shot at doing that part yourself.

This post has been edited by William_Wilson: 30 September 2008 - 06:41 AM

Was This Post Helpful? 0
  • +
  • -

#5 Stelios  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 29-September 08

Re: Javascript Changing Div Background-Images

Posted 30 September 2008 - 12:53 PM

Thanks to all,

for your help. William Wilson I included your part in the script of Betawar and it seems to work quit well changing the image of the background after loading in 2 sec. I made and enclosed in the script also an array of 4 images which rotate when the function is called, or you can cycle through them by pressing the button. The script looks right now like that:

<script>

var bgimage=new Array()
bgimage[0]="image1.png"
bgimage[1]="image2.png"
bgimage[2]="image3.png"
bgimage[3]="image4.png"


var abc=-1

function t(){
if (abc<bgimage.length-1)
abc++
else
abc=0
  document.getElementById("te").style.background = 'url("'+bgimage[abc]+'")';
}


window.onload = load;

function load()
{
	setInterval("t()",4000); //change every 4 seconds, can be 

changed.
}

</script>

<style>
#te{
  background-image: url(NORMAL_BG_IMAGE_URL_HERE);
}
</style>

<div id="te">
TEst
</div>

<br />
<input type="button" onclick="t()" />



What I would like to change to that script is to pick the pictures "at random" when the function is called, but couldn't work that out until this posting, there seems to be also a delay with the loading of the images, any help would be appreciated, thanks.

St
Attached Image
Was This Post Helpful? 0
  • +
  • -

#6 mocker  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 50
  • View blog
  • Posts: 466
  • Joined: 14-October 07

Re: Javascript Changing Div Background-Images

Posted 30 September 2008 - 02:49 PM

if you want a random image change function t() to

function t(){
document.getElementById("te").style.background = 'url("'+ bgimage[Math.floor(Math.random()*bgimage.length)]+'")';
}




any delay you are seeing depends on your browser, and the size and location of the images it is loading. The javascript itself is so small its not even a factor in performance, but when you load a new image, its just like loading a new image manually, the browser has to request it and download it before it is displayed.

This post has been edited by mocker: 30 September 2008 - 02:51 PM

Was This Post Helpful? 0
  • +
  • -

#7 Stelios  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 29-September 08

Re: Javascript Changing Div Background-Images

Posted 03 October 2008 - 01:00 AM

I didn't have the time to complete the script, like I want it,
and will over the weekend be away anyway,
so I'm basically posting to thank mocker first for his great advice and
dense solution about the random image. I wanted at first
to try to embed in the script a random number generator like
the following:

function rand(n) {
return ( Math.floor ( Math.random ( ) * n ) );
}

but this is now obsolete. On the other hand I've got still
the impression that at the beginning of every rotation, there is a
slight delay, so I embedded the preloading feature from the first
script above, it seems that things are now loading smoother,
or is this only my impression or my imagination that
is deceiving me, I'm not sure?

The script looks right now as:

 

<script>

var bgimage=new Array()
bgimage[0]="image1.png"
bgimage[1]="image2.png"
bgimage[2]="image3.png"
bgimage[3]="image4.png"

//feature preloading images 
var processing=new Array()
for (i=0;i<bgimage.length;i++){
processing[i]=new Image()
processing[i].srd=bgimage[i]
}

var abc=-1
var divID = 'te';

function t(){
if (abc<bgimage.length-1)
abc++
else
abc=0

  document.body.background=processing[Math.floor(Math.random()*bgimage.length)].srd 
  document.getElementById(divID).style.background = 'url("'+bgimage[abc]+'")'; //or for random 
  image change of the div background replace with: 'url("'+ bgimage[Math.floor(Math.random()*bgimage.length)]+'")'; and/or for rotating change of images 

for the body backgroung replace appropriate with: processing[abc].srd
  
}


window.onload = load;

function load()
{
	setInterval("t()",2000); //change every 2 seconds, can be

changed.
}

</script>

<style>
#te{
  background-image: url(NORMAL_BG_IMAGE_URL_HERE);
}
</style>

<div id="te">
TEst
</div>

<br />
<input type="button" onclick="t()" />

 


but there seems to be a problem/conflict with an other
script that I am using for sliding through the pictures, both don't
seem to work at the same time when they are together,and
I thought that maybe I could modify the above script to do
the work of the other script too, i.e. to change not only
the background picture (randomly and/or rotating) of a div and/or
the whole body section, but also to show the pictures
in a other div, not as background but as a random or
rotating slide show of the pictures, linking every one of them
also to an url. I don't know if these is difficult/possible, or if it is
better to use two separated scripts, but then, how to solve
the conflicts of the two I am using, so that both do work?

Thanks for any help

St
Attached Image
Was This Post Helpful? 0
  • +
  • -

#8 Stelios  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 29-September 08

Re: Javascript Changing Div Background-Images

Posted 02 April 2009 - 03:14 PM

Hi,

I'm just checking what did happen to my post here.

Regards, St
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1