image fade on hover + make image clickable

Question

I'd like it so when I hover over the image, the entire image becomes a link rather than just the text inside. Can someone help me with this?

Javascript:

$('.thumbnail').hover(function() {
    $('.thumbnail img').stop(true,true).fadeTo(400, 0.2);
    $('.description').stop(true,true).fadeIn(400);
}, function() {
    $('.thumbnail img').stop(true,true).fadeTo(400, 1);
    $('.description').stop(true,true).fadeOut(400);
});

Here is the jsfiddle: http://jsfiddle.net/LDs6C/15/

Answer 1

Is there a reason why you aren't just surrounding the img tag with an a tag?

<a href="content.com"><img src="..." width="200"/></a>

Doing so will accomplish what you need without the extra markup.

Answer 2

Like this: http://jsfiddle.net/LDs6C/16/

I made the link a block element and set the dimensions to equal the size of the image.

Answer 3

我认为您应该能够添加一个点击处理程序，将您带到所需的位置，例如

$('.thumbnail img').click(function(){window.location='someurl';});