Preview Links by Rolling Over Them

[Mr_Ocean]

I have a pretty extensive book list and resource list on my website. Instead of putting all the pictures next to the titles I want to have my users roll over the link and have a sneakpeak preview of the image of the book.

Does anyone know how to do this?

[ryanbutler]

Looks rock solid and a snap to implement:

http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview--jquery

[Mr_Ocean]

hi ryan,

good blog. It helped a lot more than what else I found out there. I understand that you didn't post on that blog but was wondering if you could help. I followed the instructions but for some reason when I now roll over my link the tooltip appears but the image comes up with a small blue square with a question mark. I'm sure you've seen this before in other things where images don't come up. I check the source for any spelling mistakes but everything is good. Any help?

[ryanbutler]

I would imagine the path to the image is off. Use a relative path such as:

<a href="1.jpg" class="preview"><img src="images/1s.jpg" alt="gallery thumbnail" /></a>

Where images is the directory on your web server where the images resides.