View Full Version : jQuery - Help - Hover/Mouseover - Image thumbnail preview

08-04-2008, 04:34 AM

I am fairly new to jQuery. I am attempting to build something simple (or so I think)...

I have an image embedded within an href:

<a href="mywebpage.jsp"><img src="../directory/myimage.jpg" alt="" /></a>

The href links to a web page, not the larger version of the image. The above is enclosed withing a div:

<div class="widget_map">
<a href="mywebpage.jsp"><img src="../directory/myimage.jpg" alt="" /></a>

The image is shown as thumbnail. It is being resized by CSS:

.widget_map img{
padding: 0;
margin: 5px 0 5px 5px;
border: 1px solid #bfc0be;
width: 98px;
height: 90px;

What I would like to do is show the image (the actual size) upon hover or mouseover while keeping the thumbnail present. I have found a couple scripts on the net and on the forum that come close to what I need but unfortunately I am not savy enough with my jQuery to be able to adapt them to get the result I am looking for.

The scripts I am referring to are:

$(".widget_map img").hover(function(){
$(this).addClass('enlarged'); <-- enlarged class resizes my image
$(this).height(300); <-- original height of my image
$(this).width(400); <-- original width of my image

$(this).height(90) ;
$(this).width(98) ;



The ideal solution would be the hover effect of the second with the functionality of the first. I have not been successful so far.

Any help would be greatly appreciated.


11-06-2009, 10:00 AM
i want to see the image preview while loading the image