variable number of images to rotate

Tracey · Nov 13, 2006

Hi there

I have a requirement here to change the image that displays in an image tag x number of times, on a timer.

All images that will need to be displayed (in order) will be pulled from a database. the number of images will depend on number of records returned.

Each set of images will have only one url to be linked to.

Because of the dynamic number of images, i really need to be able to pass an array of images to a javascript function which will switch the image x times.

Below is some code which i have at present, but i have set a predermined number of parameters as images. Could someone please help me make this more dynamic? Also the below code does not work, images end up undefined, as does the url.

number of images could be 0,1,2,3,n..

// Courtesy of SimplytheBest.net
var image="";
var banners=0;

function cycle() {
if (++banners > 3) banners=1; //make dynamic
loadbanners();
document.banner1.src = image;
window.setTimeout('cycle();',7000);
}

function loadbanners(gif1, gif2, gif3)
//needs dynamic array of images here
{
if (banners==1)
{
image=gif1;
}
if (banners==2)
{
image=gif2;
}
if (banners==3)
{
image=gif3;
}
}
//-->
</script>

<script language="JavaScript1.1">

</script>

</head><body onLoad="window.setTimeout('cycle();',7000);(loadbanners('msn.gif', 'yahoo.gif', 'cnn.gif'));(urlswitch('

http://www.msn.com'));">

<a href="

http://www.logis.co.nz"

onclick="this.href=urlswitch()">
<img width="100" height="50" border="0" src="cnn.gif" name="banner1"></a>

Tracey
Remember... True happiness is not getting what you want...

Its wanting what you have got!

trollacious · Nov 13, 2006

You're going to have to write the image names from the server using whatever server-side language you have access to. Then use something like this:

Code:

var imgs = new Array();
var banners = 0;

function cycle()
{
banners++;
banners %= imgs.length;
document.getElementsByName('')[0].src = imgs[banners];
window.setTimeout('cycle()',7000);
}

function loadbanners() 
//needs dynamic array of images here
{
for (var ai=0;ai<arguments.length;ai++)
  {
  imgs[ai] = new Image();
  imgs[ai].src = arguments[ai];
  }
}

If you're going to have a dynamic number of URLs, you'll be better off creating an array of objects that have the image source and URL link as properties, then reference those in your cycle() function.

Lee

Tracey · Nov 14, 2006

Thanks Troll...

Ive possibly talked the boss into using animated gifs so at this point i may have avoided this requirement...

Cheers anyway

Tracey
Remember... True happiness is not getting what you want...

Its wanting what you have got!

trollacious · Nov 14, 2006

You're going to have an interesting time coordinating and synching URLs with an animated GIF, besides handling the growing size of the image.

Lee

Tracey · Nov 14, 2006

well this info will be held in a Db table; the gif name, the url and the alt text

The image will always be 100x50 and we will have to limit the number of frames for data size.

Time will tell i suppose.

Tracey
Remember... True happiness is not getting what you want...

Its wanting what you have got!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

variable number of images to rotate

Tracey

Programmer

trollacious

Programmer

Tracey

Programmer

trollacious

Programmer

Tracey

Programmer

Similar threads

Part and Inventory Search

Sponsor