Friend asked me to help him with a page which holds more than one slideshow ( don't know why he wants to do it like that).
Firstly we created single slideshow which works nicely. Than we added second one be simple copy and paste "div & img" tags and change their id's. Our problem? When you do mouseover second "div" script is running slide show on the first one "
pics1" instead of second "
pics2". We can't figured out where is our mistake? Why is not running properly?
Code:
<html>
<head>
<title>Untitled</title>
<script language="javascript">
var currentImage = 1;
var timer;
image1 = new Image();
image1.src = "image1.jpg";
image2 = new Image();
image2.src = "image2.jpg";
image3 = new Image();
image3.src = "image3.jpg";
image4 = new Image();
image4.src = "image4.jpg";
image5 = new Image();
image5.src = "image5.jpg";
function ChangeImage(pics)
{
if (currentImage > 5)
{
currentImage = 1;
}
document.images(pics).src=eval("image"+currentImage+".src")
currentImage++;
timer = setTimeout("ChangeImage()", 1000);
}
function Stop(pics)
{
currentImage = 1;
document.images(pics).src=eval("image"+currentImage+".src")
clearTimeout(timer);
}
</script>
</head>
<body>
<div id="div1" style="position: absolute; top: 100px; left: 900px; width: 30px; height: 10px; border: solid;"
onMouseOver="ChangeImage('pics1')" onMouseOut="Stop('pics1')">
</div>
<img src="image1.jpg" name="pics1" id="pics1">
<br>
<br>
<div id="div2" style="position: absolute; top: 500px; left: 900px; width: 30px; height: 10px; border: solid;"
onMouseOver="ChangeImage('pics2')" onMouseOut="Stop('pics2')">
</div>
<img src="image1.jpg" name="pics2" id="pics2">
</body>
</html>
Any idea where is problem with this script.
Thanks for help and advice
P.T.
Want to run more than one Slideshow on the page
