How can I link image to another page?

Question

I am currently working on my school project website and I am really having a hard time coding. So in my website I made an image slider and I wanted the images to be linked to another page, like if the user clicked the image they will be redirected to another page that contains information regarding the image they clicked. I also wanted a hover text when the mouse is pointed on the image that shows the title of it.

I tried to search and to watch videos on how to link images but nothing works.

Here's my code:

<script type="text/javascript">
  <!-->
  var image1=new Image()
 image1.src="e.jpg"
  var image2=new Image()
 image2.src="g.jpg"
 var image3=new Image()
 image3.src="h.jpg"
 //-->
</script>

<style type="text/css">
    #gallery {
   width: 100%;
  height: 100%;
  }

  #gallery img {
 width: 55%;
  }
</style>

<DOCTYPE!html>
 <html>
 <body>
  <center>
   <div id="gallery">
 <img src="e.jpg" name="slide" alt="Track race">
 <script type="text/javascript">
   <!--
   var step=1
    function slideit(){
    document.images.slide.src=eval("image"+step+".src")
    if(step<3)
       step++
       else
    step=1
    setTimeout("slideit()",2500)
    }
    slideit()
    //-->
 </script>
   </div>
  </center>
</body>
</html>

What problems are you having? This is not a site to have others do your homework. — AutomatedOrder, Oct 19 '15 at 15:32
you really should find a more direct way to ask your questions or people will get upset and think you are just trying to freeload off of them. If you are just a copy/paste """coder""" than this is NOT the site for you, i'm sorry. — Johnathan Ralls, Oct 19 '15 at 15:35
Sorry! I forgot to add to my question. I tried using myLink = document.getElementById('function-click'); myLink.onclick = ShowOld(2367,146986,2); but i didnt work. p.s- do you know any website helpful for beginners like me? Thank you! — WebNewbie, Oct 19 '15 at 15:42

score 0 · Answer 1 · edited May 23 '17 at 12:23

onclick on a image to navigate to another page using Javascript

3rd best answer:

I'd set up your HTML like so:

<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" id="bottle" />

Then use the following code:

<script>
var images = document.getElementsByTagName("img");
for(var i = 0; i < images.length; i++) {
var image = images[i];
image.onclick = function(event) {
     window.location.href = this.id + '.html';
};
}

That assigns an onclick event handler to every image on the page (this may not be what you want, you can limit it further if necessary) that changes the current page to the value of the images id attribute plus the .html extension. It's essentially the pure Javascript implementation of @JanPöschko's jQuery answer.

How can I link image to another page?

1 Answers1