Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image mouseover effect

    I've done a few searches both here and in JavaScript forums, and though I am sure I have seen something on this in the past in these forums, I cannot find what I am looking for - so I will post my question to you.

    I want to add small thumbnail images to my site, which on mouseover, expand to the full-size image. I have seen similar effects on the web, though I can think of no specific sites at the moment to check out how they have done so.

    I did search DynamicDrive, but the closest I can find is a few on-click scripts, which also require a second click to close the new larger image. I simply want the image to expand in place on mouseover, and shrink when the mouse leaves the (larger) image. Preferably visibly expanding and contracting, but an instant pop-out effect would be acceptable too.

    How should I go about doing this? I had a few ideas, but nothing is working well at all so far. In fact, all of my ideas have created extremely crappy results.

    Thanks!

    [edit] . . . . Oh, almost forgot one element of this I want to have - I want the new, larger images to expand and cover the text or nearby images, not push everything away as it expands.
    Last edited by kargrafx; 02-12-2004 at 08:23 PM.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's likely you'll find the best value in something like this ToolTip script offered by Vladdy, another regular here.

    http://www.klproductions.com/kltooltips.html

    Put your full sized image into a tooltip that's triggered by the mouse going over your thumbnail. The tooltip code can then display the full sized image without pushing all the rest of the page around.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I hadn't thought about that approach... using an image in a tool-tip. I still would love to have the image visibly 'grow' from small to large instead f just popping up full size, but this is a huge step in the right direction; and will work suitably if nothing else can be done.

    Thanks!

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the plug Roy .
    The problem with either approach would be preloading large images. If you do not do it, the only thing that will "popup" would be the image placeholder.
    While my tooltip code is designed for mostly title attribute enchancement, you can use it for your application, especially if you have thumbnails all over the page and would like the "pop-up" to be automatically positioned within the window.
    If positioning is not a problem for you, you can use a simple CSS code to do the job: www.vladdy.net/Demos/SuppInfoPopUp.html - just replace the div with large image.

    If you want to have the zoom effect, the steps would be the following:
    1. Have thimbnails in your HTML.
    2. Using window onload, start loading large size images and replacing your thumbnails with them (keeping the thumbnail size). Alternately you can leave them until the first mouseover if such replacement causes flicker.
    3. Process onmouseover/onmouseout on your images to change the size. If the image was downloaded, then the hires version will be zoomed, if not the user will have to live with the lowres version... You can see the principles of image zooming technique in this demo:
    www.vladdy.net/Demos/imageadjustments.html.
    If that is over your head I can custom script this for you at "codingforum member" discount rate
    Last edited by Vladdy; 02-12-2004 at 10:36 PM.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #5
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am not sure if this is what you are looking for. This will resize the current image but, it will also shift the content. It may be best to set a z-index to place the image on top of everything else.

    <script type="text/javascript">
    function upSize(name) {
    document.images[name].width = 198;
    document.images[name].height = 217;
    }
    function downSize(name) {
    document.images[name].width = 96;
    document.images[name].height = 108;
    }
    </script>
    </HEAD>

    <BODY>
    <img src="http://www.mindmeld.net/gobots/robo/bonzo.gif" width="96" height="108" name="bonzo" onMouseover="upSize(this.name)" onMouseout="downSize(this.name)">


    .....Willy


  •  

    Posting Permissions

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