Web Analytics Made Easy - StatCounter Image mouseover effect - CodingForum

Announcement

Collapse
No announcement yet.

Image mouseover effect

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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; Feb 12, 2004, 02:23 PM.
    Tags: None
  • #2
    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.

    Comment

    • #3
      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!

      Comment

      • #4
        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; Feb 12, 2004, 04: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"

        Comment

        • #5
          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

          Comment

          Previous template Next
          Working...
          X