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)

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

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

Answer 1

maybe this is what u want?

<a href="#" id="bottle" onclick="document.location=this.id+'.html';return false;" >
    <img src="../images/bottle.jpg" alt="bottle" class="thumbnails" />
</a>

edit: keep in mind that anyone who does not have javascript enabled will not be able to navaigate to the image page....