PDA

View Full Version : Image rotator



Macca
02-16-2009, 10:07 PM
I have an image rotator script that everytime the page is refreshed the image changes. I would like to add a time delay on before the image changes. How can I do this? Current script below.

<style type="text/css">
div#image_rotate img {
margin: 0;
padding: 0;
border: 0;
}

p#image_caption {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 0.8em;
}

cite#image_attrib {
font-family: verdana, arial, helvertica, sans-serif;
margin: 0;
font-size: 0.8em;
}
</style>

<script>

function addLoadEvent(newOnLoadFunction)
{
var theOnLoadFunctions = window.onload;
if (typeof window.onload != 'function')
{
window.onload = newOnLoadFunction;
}
else
{
window.onload = function()
{
if (theOnLoadFunctions)
{
theOnLoadFunctions();
}

newOnLoadFunction();
}
}
}

function rotateImage()
{
var imgArray =
[

"/images/photo/intranet74.jpg",
"/images/photo/intranet75.jpg",
"/images/photo/intranet76.jpg",
"/images/photo/intranet77.jpg",

];

var captionArray =
[

"caption 1",
"caption 2",
"caption 3",
"caption 4",

];

var attribArray =
[

"title 1",
"title 2",
"title 3",
"title 4",


];

if (document.getElementById && document.getElementsByTagName)
{
srcImage = document.getElementById("source_image");
srcCaption = document.getElementById("image_caption");
srcAttrib = document.getElementById("image_attrib");

var rndIndex = Math.floor(Math.random() * 4);


srcImage.src = imgArray[rndIndex];
srcCaption.innerHTML = captionArray[rndIndex];
srcAttrib.innerHTML = attribArray[rndIndex];
}
}

//add image rotator function to onload queue
addLoadEvent(rotateImage);

</script>


<div id="image_rotate">
<div id="image_frame">
<img id="source_image" src="/images/photo/intranet74.jpg" />
<p id="image_caption"></p>
<cite id="image_attrib"></cite>
</div>
</div>

robin9000
02-16-2009, 10:27 PM
It would be helpful to post a link to the page.

Macca
02-17-2009, 09:18 AM
Sorry the page is internal.