CODEWITHSUNDEEP
javascripthyperlinkslider
Blade69
Blade69

Reputation: 1

Javascript slider with links

Hi how to add html links? into img1 img2 img3 img4

slider.js code:

var imageCount = 1;
var total = 4;

function photo(x) {
    var image = document.getElementById('image');
    imageCount = imageCount + x;
    if(imageCount > total){
        imageCount = 1;
    }
    if(imageCount < 1){
        imageCount = total;
    }
    image.src = "Slide/img"+ imageCount +".png";
}

window.setInterval(function photoA() {
    var image = document.getElementById('image');
     imageCount = imageCount + 1;
      if(imageCount > total){
          imageCount = 1;
      }
      if(imageCount < 1){
          imageCount = total;
      }
      image.src = "Slide/img"+ imageCount +".png";
},5000);

Html code:

<body onLoad="photoA()">
    <div id="slider">
        <img src="Images/img1.jpg" id="image" >
        <a id="Images/img1.jpg"><img id="image"></a>
        <div class="left_hold"><img onClick="photo(-1)" class="left" src="Images/arrow_left.png"></div>
        <div class="right_hold"><img onClick="photo(1)" class="right" src="Images/arrow_right.png"></div>
    </div>

Can I put links into array? and how to do that? var imagelinks=["www.link1.com", "www.link2.com", "www.link3.com", "www.link4.com"];

Upvotes: 0

Views: 1239

Answers (2)

Mohamed Zammit
Mohamed Zammit

Reputation: 31

you can try this

<body onLoad="photoA()"> <div id="slider"> <a href="yourlink"><img src="Images/img1.jpg" id="image" ></a> <a href="yourlink" id="Images/img1.jpg"><img id="image"></a> <div class="left_hold"><img onClick="photo(-1)" class="left" src="Images/arrow_left.png"></div> <div class="right_hold"><img onClick="photo(1)" class="right" src="Images/arrow_right.png"></div> </div> </body>

Upvotes: 1

Aditya
Aditya

Reputation: 196

Okay first of all, you must not use the same id for multiple elements on the page. You must use Classes for that. IDs are unique per element.

And regarding the images inside anchor tags, Here is how you do it. 

<div>
  <a href='http://www.google.com'>
  <span>
    <img src='http://velocityagency.com/wp-content/uploads/2013/08/go.jpg'>
  </span>
  </a>
</div>

And yes you can put the links in an array. Just append the 'http://' for them to actually redirect properly. And I have a bad feeling that you are approaching your problem in a very wrong way. The code you wrote can be rewritten in a much more better way. Consider using jquery if you want to get such trivial stuff done quickly.

Upvotes: 0

Related Questions