30

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

JD Smith
  • 1,764
  • 15
  • 17
125369
  • 3,547
  • 20
  • 52
  • 70
  • 1
    Are all of your images going to be stored in the images folder? – Anthony Grist Dec 16 '11 at 15:56
  • 1
    yes, all my images are stored in images folder! But that can also be changed since it my call – 125369 Dec 16 '11 at 15:57
  • 2
    I suggest you to _finish_ a basic tutorial series before trying to put something together yourself. –  Dec 16 '11 at 15:59
  • 1
    I have done some basic stuff with Javascript, and I have an idea how the onclick and some more javascript functions work. I was just wondering how I can direct to another web page using this onclick function – 125369 Dec 16 '11 at 16:02
  • 3
    @Omeid, some people (like myself) learn by doing, not reading. Regardless, this entire forum is to share our knowledge with others. – Johnny Craig Dec 16 '11 at 16:05
  • @JohnnyCraig, That is the way to learn, _learn by doing_. but it doesn't mean you shouldn't do basics first. –  Dec 17 '11 at 07:28

4 Answers4

35

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....

Johnny Craig
  • 4,974
  • 2
  • 26
  • 27
22

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" />
Jan Pöschko
  • 5,412
  • 1
  • 28
  • 28
  • 1
    I would also recommend that you consider keeping the plain HTML links, to support people who don't have JavaScript enabled. But there are many times when it's helpful to add an event handler function like this and jQuery is a great way to do it. – JD Smith Dec 16 '11 at 16:13
  • 1
    Thanks Johnny! I want to add, similar to your comment, that this might be an elegant solution _if_ you want to rely on JavaScript anyway. However, if it's just about ten images it is most probably better to stick to plain HTML as in the original solution (compatibility- and usability-wise). – Jan Pöschko Dec 16 '11 at 16:17
9

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.

Anthony Grist
  • 38,173
  • 8
  • 62
  • 76
  • 1
    I have to admit that this is probably a better, more light-weight solution if this would be the only purpose of loading jQuery. (If you, for some reason, already have it included, make use of it, of course.) To be fair, what my code does additionally is to wait for the document to be ready, which is necessary if you want to put the code in the header or in some external JS file. – Jan Pöschko Dec 16 '11 at 16:27
3

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>.

Hristo
  • 45,559
  • 65
  • 163
  • 230