onclick on a image to navigate to another page using Javascript

Question

I am getting warmed up with Javascript so I am trying something on my own  I am searching for a onclick function  where I have thumbnail images in my index html page  and whenever a user clicks the image he will be redirected to a new page where the image is again displayed along with some information about it  Right now I am doing it using just plain HTML   I want to use javascript to navigate to the page corresponding to the image the user has clicked  Is that possible to do using onclick  I have more than 10 images on my webpage and each time a user clicks an image I want to get the id of that image and redirect it to the new page  The new page is named after the image name   For ex  image name  bottle jpg  residing in the images folder  redirect page name  bottle html  residing in the main folder    lt a href  bottle html  id  bottle   gt  lt img src     images bottle jpg  alt  bottle  class  thumbnails    gt  lt  a gt    Any valuable information will be appreciated   If it is somewhere asked in this forum  it would be helpful if somebody can give me that link   Thanks  Raaks

User · Answer

I d set up your HTML like so    lt img src     images bottle jpg  alt  bottle  class  thumbnails  id  bottle    gt    Then use the following code    lt script gt  var images   document getElementsByTagName  img    for var i   0  i  lt  images length  i          var image   images i       image onclick   function event             window location href   this id     html             lt  script gt    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

User · Answer

maybe this is what u want    lt a href     id  bottle  onclick  document location this id   html  return false    gt       lt img src     images bottle jpg  alt  bottle  class  thumbnails    gt   lt  a gt    edit  keep in mind that anyone who does not have javascript enabled will not be able to navaigate to the image page

User · Answer

You can define a a click function and then set the onclick attribute for the element   function imageClick url        window location   url      lt img src     images bottle jpg  alt  bottle  class  thumbnails  onclick  imageClick     images bottle html      gt    This approach lets you get rid of the surrounding  lt a gt  element  If you want to keep it  then define the onclick attribute on  lt a gt  instead of on  lt img gt

User · Answer

Because it makes these things so easy  you could consider using a JavaScript library like jQuery to do this    lt script gt        document  ready function                img thumbnail   click function                 window location href   this id     html                        lt  script gt    Basically  it attaches an onClick event to all images with class thumbnail to redirect to the corresponding HTML page  id    html   Then you only need the images in your HTML  without the a elements   like this    lt img src  bottle jpg  alt  bottle  class  thumbnail  id  bottle    gt   lt img src  glass jpg  alt  glass  class  thumbnail  id  glass    gt

[javascript] onclick on a image to navigate to another page using Javascript

Examples related to javascript

Examples related to onclick