Adding image links to a specific page in a JavaScript slidshow

Question

I'm busy with a e-commerce website and the client wants 3 slide shows running next to each other displaying specials or promotions running on the site. I got it right to run the 3 slide shows next to each other but don't know how to add image links that should you click on that certain special it will take you to the corresponding page.

Please note I'm still a newbie when it comes to JavaScript but I have knowledge of html and css.

Here is the code I used:

This is the code that goes in the head section.

<head>
<script type="text/javascript">
<!--
var Imgs=['/images/specials/1.jpg','/images/specials/2.jpg','/images/specials/3.jpg','/images/specials/4.jpg','/images/specials/5.jpg',];
for (var src,z0=0;z0<Imgs.length;z0++){
src=Imgs[z0];
Imgs[z0]=new Image();
Imgs[z0].src=src;
 }

var Imgs1=['/images/specials/3.jpg','/images/specials/4.jpg','/images/specials/5.jpg','/images/specials/1.jpg','/images/specials/2.jpg',]
for (var src,z0=0;z0<Imgs1.length;z0++){
src=Imgs1[z0];
Imgs1[z0]=new Image();
Imgs1[z0].src=src;
 }

var Imgs2=['/images/specials/5.jpg','/images/specials/1.jpg','/images/specials/4.jpg','/images/specials/2.jpg','/images/specials/3.jpg',];
for (var src,z0=0;z0<Imgs2.length;z0++){
src=Imgs2[z0];
Imgs2[z0]=new Image();
Imgs2[z0].src=src; 
 }

//-->
</script>
</head>

Next the part that goes into the body section of my page

<body>
<img src="/images/1.jpg" id="slide" width="33%" height="300" />
<img src="/images/3.jpg" id="slide1" width="33%" height="300" />
<img src="/images/5.jpg" id="slide1" width="33%" height="300" />

<script type="text/javascript">
<!--

function slideit(o){
this.img=document.getElementById(o.ImageID);
if (this.img){
this.ary=o.ImageArray;
this.ms=o.Duration;
this.cnt=0;
this.to=null;
this.slide();
 }
}

slideit.prototype.slide=function(){
this.img.src=this.ary[this.cnt].src;
this.cnt=++this.cnt%this.ary.length;
var oop=this;
this.to=setTimeout(function(){ oop.slide(); },this.ms);
}

new slideit({
ImageID:'slide'
ImageArray:Imgs,
Duration:4500
});

new slideit({
ImageID:'slide1'
ImageArray:Imgs1,
Duration:5500
});

new slideit({
ImageID:'slide2',
ImageArray:Imgs2,
Duration:6500
});

//-->
</script>
</body>

If its that easy could you please advise me as how and where to add image links to the code above.

Kind regards, Jakesza

Update

I got the slide to work again what I have noticed is that the script in the body part needs to stay there asoon as I move it to the head section the slide stops working. Also if I add the var=Href parts to the code the slide shows but doesnt transition. Here is a link the page I have been experimenting on.

http://www.compunamics.co.za/test.html

Thanks for your time,

Jakesza

Answer 1

Have fun

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script type="text/javascript"><!--
var sliderSetup = [
  {
    "id":"slide0",  
    "hrefs":['http://www.google.co.za','http://www.stackoverflow.com','http://www.test.com','http://www.amazon.com','http://www.bidorbuy.co.za'],
    "images":['/images/test/image1.gif','/images/test/image2.gif','/images/test/image3.gif','/images/test/image4.gif','/images/test/image5.gif'],
    "duration":4500
  },
  {
    "id":"slide1",  
    "hrefs":['http://www.bidorbuy.co.za','http://www.stackoverflow.com','http://www.test.com','http://www.amazon.com','http://www.google.co.za'],
    "images":['/images/test/image5.gif','/images/test/image6.gif','/images/test/image7.gif','/images/test/image8.gif','/images/test/image1.gif'],
    "duration":5000
  },
  {
    "id":"slide2",  
    "hrefs":['http://www.google.co.za','http://www.stackoverflow.com','http://www.test.com','http://www.amazon.com','http://www.bidorbuy.co.za'],
    "images":['/images/test/image7.gif','/images/test/image8.gif','/images/test/image1.gif','/images/test/image2.gif','/images/test/image6.gif'],
    "duration":5500
  }
];

function slideit(o){
  this.img=document.getElementById(o.ImageID);
  if (this.img){
    this.ary=[];
    for (var i=0;i<o.ImageArray.length;i++) {
      this.ary[i]=new Image(); 
      this.ary[i].src=o.ImageArray[i];
    }
    this.ms=o.Duration;
    this.cnt=0;
    this.hrefs=o.HrefArray;
    this.to=null;
    this.slide();
  }
}

slideit.prototype.slide=function() {
  this.img.src=this.ary[this.cnt].src;
  this.cnt=++this.cnt%this.ary.length;
  this.img.parentNode.href = this.hrefs[this.cnt];
  var oop=this;
  this.to=setTimeout(function(){ oop.slide(); },this.ms);
}

window.onload=function() {
  for (var i=0;i<sliderSetup.length;i++) {
    new slideit({
      ImageID:sliderSetup[i].id,
      ImageArray:sliderSetup[i].images,
      HrefArray:sliderSetup[i].hrefs,
      Duration:sliderSetup[i].duration
    });
  }
}


//-->
</script>
</head>
<body>
<a href="http://www.google.co.za"><img alt="" src="/images/test/image1.gif" id="slide0" height="150" width="150" /></a>
<a href="http://www.bidorbuy.co.za"><img alt="" src="/images/test/image5.gif" id="slide1" height="150" width="150" /></a>
<a href="http://www.test.com"><img alt="" src="/images/test/image3.gif" id="slide2" height="150" width="150" /></a>
</body>
</html>

Adding image links to a specific page in a JavaScript slidshow

Question

1 answers

solution1
0 ACCPTED 2011-04-14 11:56:00

Adding image links to a specific page in a JavaScript slidshow

Question

1 answers

solution1 0 ACCPTED 2011-04-14 11:56:00

solution1
0 ACCPTED 2011-04-14 11:56:00