Change thumbnail image on rollover in the loop

Question

I've got a question. I am working with wordpress and have a blog which posts are presented with thumbnails. I'd like those thumbnails change when you put your mouse on. The problem is that I want different images change thumbnails. basically, each thumbnail would have its unique rollover image. the problem is that i don't quite know how to attach js code to the loop. And how it should look like to create different rollover images for different posts
if i attach js code to the permalink, it will change all thumbnails into the same picture. also, i was told it is possible to do with jquery. is it worthy?
i was trying to be as clear as possible
any help is appreciated!

Answer 1

You could add a custom field to each of your posts called hoverImg , which value is the link to the image you want to use as a rollover image.

Then you fetch the link in the loop, and add it:

<?php $hover_image = get_post_meta($post->ID, 'hoverImg', true); ?>

<img class="hover-img" src="<?php echo $hover_image; ?>" />  

this image should be initially invisible, and positioned as an overlay to your thumbnail. Then just show it on hover with jquery.

Since I dont have your image, I've created a jsFiddle with two divs, one representing your thumbnail, and one representing your rollover image to mimic the effect:

http://jsfiddle.net/9Xa92/1/

You should just replace the <div class="hover-img"></div> in the jsfiddle with the actual thumbnail image (created above).