-
Image rotator
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>
-
-
It would be helpful to post a link to the page.
-
-
Sorry the page is internal.
-
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
Bookmarks