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

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

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';
    };
}
</script>

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.

You can define a a click function and then set the onclick attribute for the element.

function imageClick(url) {
    window.location = url;
}

<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" onclick="imageClick('../images/bottle.html')" />

This approach lets you get rid of the surrounding <a> element. If you want to keep it, then define the onclick attribute on <a> instead of on <img>.

Because it makes these things so easy, you could consider using a JavaScript library like jQuery to do this:

<script>
    $(document).ready(function() {
        $('img.thumbnail').click(function() {
            window.location.href = this.id + '.html';
        });
    });
</script>

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:

<img src="bottle.jpg" alt="bottle" class="thumbnail" id="bottle" />
<img src="glass.jpg" alt="glass" class="thumbnail" id="glass" />