...

View Full Version : Slide Show Loop



jdubicki
06-27-2012, 04:41 AM
Hello,

I have a snippet of code that cycles though 3 images. I want to be able to attached an html formatted description to each image that will be displayed depending on the image. Can anyone help me with this.



<html>
<head>
<script type="text/javascript">
<!--
// preload images
var image1=new Image()
image1.src="Transportation_1.png"
var image2=new Image()
image2.src="Transportation_2.png"
var image3=new Image()
image3.src="Transportation_3.png"
// -->
</script>
</head>
<body>
<center>
<h2><strong><font color="#534D02">Featured Growth Chart</font></strong></h2>
</center>
<a href="javascript:slidelink()">
<center>
<img src="Transportation-1" name="slide" width="100" height="400" />
</a>
</center>
<center>
<h3>Stacked Owls (Sherbet) Canvas Growth Chart</h3>
<h3><font color="#BE0101">$40.00</font></h3>
</center>
<script>
<!--
var step=1
var whichimage=1

function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<3)
step++
else
step=1
setTimeout("slideit()",1800)
}
slideit()

function slidelink(){
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
window.location="link2.htm"
else if (whichimage==3)
window.location="link3.htm"
}
//-->
</script>
</body>
</html>

DrDOS
06-27-2012, 04:49 AM
It's old code, no one makes htm pages, uses eval in their code, or uses center tags. You might want to look for newer code before you spend too much time on this.

vwphillips
06-27-2012, 12:37 PM
<html>
<head>
<script type="text/javascript">
<!--
// preload images
var image1=new Image()
image1.src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg"
var image2=new Image()
image2.src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg"
var image3=new Image()
image3.src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg"

var ImageArray=[
['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','Egypt 5','link1.htm'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','Egypt 6','link2.htm'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','Egypt 7','link3.htm']
];

// -->
</script>
</head>
<body>
<center>
<h2><strong><font color="#534D02">Featured Growth Chart</font></strong></h2>
</center>
<a href="javascript:slidelink()">
<center>
<img src="Transportation-1" id="slide" width="100" height="400" />
</a>
<div id="text" ></div>
</center>
<center>
<h3>Stacked Owls (Sherbet) Canvas Growth Chart</h3>
<h3><font color="#BE0101">$40.00</font></h3>
</center>
<script>
<!--
var step=0;
var whichimage=0;

function slideit(){
document.getElementById('slide').src=ImageArray[step][0];
document.getElementById('text').innerHTML=ImageArray[step][1]||'';
whichimage=step;
step=++step%ImageArray.length;
setTimeout("slideit()",1800)
}
slideit()

function slidelink(){
if (ImageArray[whichimage][2]){
window.location=ImageArray[whichimage][2];
}
}
//-->
</script>
</body>
</html>

jdubicki
06-27-2012, 01:39 PM
Thank you very much Vic, you have been a great help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum