Quote:
Originally Posted by phisolophe
A simplified version with just one set of images...with some URLs attached to the images...The timeout is in miliseconds...3000 = 3 seconds...
Hope this helps...
Code:
<body>
<a id="imageurl" ><img id="Rotating1" border="0"></img></a>
<script language="JavaScript">
function RotateImages(Start)
{
var a = new Array("image1.jpg","image2.jpg","image3.jpg", "image4.jpg");
var c = new Array("url1", "url2", "url3", "url4");
var b = document.getElementById('Rotating1');
var d = document.getElementById('imageurl');
if(Start>=a.length)
Start=0;
b.src = a[Start];
d.href = c[Start];
window.setTimeout("RotateImages(" + (Start+1) + ")",3000);
}
RotateImages(0);
</script>
</body>
I just wanted to thank you for this code snippet, I have been scouring for a small fast loading script that worked in all browsers (at least ie6 and above) and had the exact features of rotation and url's assigned to each one. I was looking at jquery scripts, which are awesome, but it's just too much overhead for my project. I am hand coding a site and I want: 1) no external libraries 2) small as possible overhead 3) xhtml 1.0 transitional certified
You helped me accomplish 1 and 2, here is 3:
Code:
<a id="imageurl" name="imageurl"><img src="Rotating1" id="Rotating1" border="0" alt="Rotating1" name="Rotating1" /></a>
<script language="javascript" type="text/javascript">
function RotateImages(Start)
{
var a = new Array("1.jpg","2.jpg","3.jpg", "4.jpg");
var c = new Array("url1", "url2", "url3", "url4");
var b = document.getElementById('Rotating1');
var d = document.getElementById('imageurl');
if(Start>=a.length)
Start=0;
b.src = a[Start];
d.href = c[Start];
window.setTimeout("RotateImages(" + (Start+1) + ")",3000);
}
RotateImages(0);
</script>
Minor changes, I know, but if someone wants/needs xhtml 1.0 transitional there it is. I started out going for xhtml 1.0 strict, but it become to restraining (see: bitchy)
Thank you so much, I hope someone finds this useful!