Randomly swapping groups of images

[johnsimpson]

Hi guys,

I am trying to build a page where i want the top banner and the bottom banner to change randomly on refresh of page. The trouble is the top and bottom banners are themed and so i need to somehow group them together so they change together in sets.

i got the code for randomly changing an image but how can i make it change sets of images?

here is the code im using:

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
// Set up the image files to be used.
var theImages = new Array()

theImages[0] = 'images/top_banner.jpg'
theImages[1] = 'images/top_banner_2.jpg'

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer = new Image()
preBuffer.src = theImages
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'" width="800" height="151" alt="Rare IT" />');
}
// End -->
</script>

the top banners are of things like fish, fields, houses etc and the bottom banner is like a contiunation of the top banner, so the fish them will be fish for top an bottom. I need to specify two images per group and randomly load each group on refresh.

thanks
J

 

[BabyJeffy]

If you were to define your data pairs like this:

theImages[theImages.length] = {
  info:'A fish themed image',
  top:'images/top_banner_fish.jpg',
  bottom:'images/bottom_banner_fish.jpg'
};
theImages[theImages.length] = {
  info:'A car themed image',
  top:'images/top_banner_car.jpg',
  bottom:'images/bottom_banner_car.jpg'
};
theImages[theImages.length] = {
  info:'A dog themed image',
  top:'images/top_banner_dog.jpg',
  bottom:'images/bottom_banner_dog.jpg'
};

Then you could extend your code to do what you want by doing something like this:

var whichImage = Math.round(Math.random()*(theImages.length-1));
function showHeaderImage(){
  document.write('<img src="'+theImages[whichImage].top+'" width="800" height="151" alt="'+theImages[whichImage].info+'" />');
}
function showFooterImage(){
  document.write('<img src="'+theImages[whichImage].bottom+'" width="800" height="151" alt="'+theImages[whichImage].info+'" />');
}

I haven't tested any of this... so apologies if it goes all "pear shaped" on you. The idea is there at least.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[johnsimpson]

cheers i will have a go at it now, much appreciated

J

 

[johnsimpson]

Hi Jeff, thanks for the code, worked perfectly...

Just one more thing tho, i've just realised that i need to set the image for the footer as a background image really as i have text over the top of it with copyright and site map etc...

At the moment it is using a style (sorry i forgot to mention this) which sets the background image.

Can i change a style using the javascript? rather than using a image?

thanks for your help so far

J

 

[BabyJeffy]

Sure... if you give your footer an id, and then change the footer function to use document.getElementById:

function showFooterImage(){
  var myObj = document.getElementById('myFooter');
  myObj.style.backgroundImage="url('"+theImages[whichImage].bottom+"')";
}

You would trigger the showFooterImage() function once the page has loaded (although you can most likely use it directly after you have closed the footer container completely).

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[johnsimpson]

Jeff i cant thank you enough!!

thanks my friend
J