Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Thanked 0 Times in 0 Posts

    jQuery - Help - Hover/Mouseover - Image thumbnail preview


    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.


  2. #2
    New to the CF scene
    Join Date
    Nov 2009
    Thanked 0 Times in 0 Posts
    i want to see the image preview while loading the image


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts