...

View Full Version : Clickable Slideshow



ohioreef
05-08-2006, 06:53 PM
I am new to Javascript.

I am using a clickable slideshow to display banner ads on a website. I followed the directions here: http://www.javascriptkit.com/howto/show2.shtml for writing the code. The example they used only had 3 images, I have 7.

I have been able to get the 7 images to rotate with any problem, however when I try to make the images clickable I run into problems. The first 3 images work fine but the next 4 are not clickable.

I am sure that it's something simple, but I can't seem to find it. My code is below:



<html>
<head>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="/adbanners/joel.jpg"
var image2=new Image()
image2.src="/adbanners/scott.gif"
var image3=new Image()
image3.src="/adbanners/phishy.jpg"
var image4=new Image()
image4.src="/adbanners/awi.gif"
var image5=new Image()
image5.src="/adbanners/ic.gif"
var image6=new Image()
image6.src="/adbanners/md.jpg"
var image7=new Image()
image7.src="/adbanners/pa.jpg"
</script>
</head>

<body>
<a href="javascript:slidelink()"><img src="http://www.worcreef.org/adbanners/joel.jpg" name="slide" width="468" height="60" /></a>
<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<7)
step++
else
step=1
setTimeout("slideit()",3000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="http://www.aquariumsetc.com"
else if (whichimage==2)
window.location="http://www.justcoral.com"
else if (whichimage==3)
window.location="http://www.phishybusiness.com"
elseif (whichimage==4)
window.location="http://www.airwaterice.com"
elseif (whichimage==5)
window.location="http://www.icecapinc.com"
elseif (whichimage==6)
window.location="http://www.marinedepot.com"
elseif (whichimage==71)
window.location="http://www.premiumaquatics.com"
}
</script>
</body>
</html>

vwphillips
05-08-2006, 07:27 PM
<html>
<head>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

var image0=new Image()
image0.src="http://www.worcreef.org//adbanners/joel.jpg"
var image1=new Image()
image1.src="http://www.worcreef.org//adbanners/scott.gif"
var image2=new Image()
image2.src="http://www.worcreef.org//adbanners/phishy.jpg"
var image3=new Image()
image3.src="http://www.worcreef.org//adbanners/awi.gif"
var image4=new Image()
image4.src="http://www.worcreef.org//adbanners/ic.gif"
var image5=new Image()
image5.src="http://www.worcreef.org//adbanners/md.jpg"
var image6=new Image()
image6.src="http://www.worcreef.org//adbanners/pa.jpg"

var ImgAry=[image0.src,image1.src,image2.src,image3.src,image4.src,image5.src,image6.src];
var LinkAry=["http://www.aquariumsetc.com","http://www.justcoral.com","http://www.phishybusiness.com","http://www.airwaterice.com","http://www.icecapinc.com","http://www.marinedepot.com","http://www.premiumaquatics.com"];

var step=0

function slideit(){
if (!document.images) return;
document.getElementById('slide').src=ImgAry[step];
document.getElementById('link').href=LinkAry[step];
step=++step%ImgAry.length;
setTimeout("slideit()",3000)
}

/*]]>*/
</script>

</head>

<body onload="slideit();">
<a id="link" href="#" ><img src="http://www.worcreef.org/adbanners/joel.jpg" id="slide" width="468" height="60" /></a>
</body>
</html>

ohioreef
05-08-2006, 08:13 PM
<html>
<head>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

var image0=new Image()
image0.src="http://www.worcreef.org//adbanners/joel.jpg"
var image1=new Image()
image1.src="http://www.worcreef.org//adbanners/scott.gif"
var image2=new Image()
image2.src="http://www.worcreef.org//adbanners/phishy.jpg"
var image3=new Image()
image3.src="http://www.worcreef.org//adbanners/awi.gif"
var image4=new Image()
image4.src="http://www.worcreef.org//adbanners/ic.gif"
var image5=new Image()
image5.src="http://www.worcreef.org//adbanners/md.jpg"
var image6=new Image()
image6.src="http://www.worcreef.org//adbanners/pa.jpg"

var ImgAry=[image0.src,image1.src,image2.src,image3.src,image4.src,image5.src,image6.src];
var LinkAry=["http://www.aquariumsetc.com","http://www.justcoral.com","http://www.phishybusiness.com","http://www.airwaterice.com","http://www.icecapinc.com","http://www.marinedepot.com","http://www.premiumaquatics.com"];

var step=0

function slideit(){
if (!document.images) return;
document.getElementById('slide').src=ImgAry[step];
document.getElementById('link').href=LinkAry[step];
step=++step%ImgAry.length;
setTimeout("slideit()",3000)
}

/*]]>*/
</script>

</head>

<body onload="slideit();">
<a id="link" href="#" ><img src="http://www.worcreef.org/adbanners/joel.jpg" id="slide" width="468" height="60" /></a>
</body>
</html>


If I add new banners, would I just add var image=7 and so on?

vwphillips
05-08-2006, 08:22 PM
yes and a new link url

ohioreef
05-08-2006, 08:31 PM
Can the clicks open a new window? Can the images be shown on a random basis?

ohioreef
05-08-2006, 10:09 PM
I figured out how to get it to open a new window when you click on an ad!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum