Need Help - Hover/Mouseover - Image thumbnail preview
Hi,
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>
</div>
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
},function(){
$(this).removeClass('enlarged');
$(this).height(90) ;
$(this).width(98) ;
});
and
http://cssglobe.com/lab/tooltip/02/main.js
The ideal solution would be the hover effect of the second with the functionality of the first. Any help would be greatly appreciated.
Ally