Results 1 to 5 of 5

Thread: onmouseover zoom images

  1. #1
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    807
    Thanks
    87
    Thanked 2 Times in 2 Posts

    Default onmouseover zoom images

    Hey all, I found this great script at browsershots, where an image zooms up onmouseover.
    This is the js:
    Code:
    function setZoom(img, dir, width, height, margin, zIndex, delay) {
      setTimeout(function() {
        if (img.dir==dir) {
          img.style.width=width;
          img.style.height=height;
          img.style.margin=margin;
          img.style.zIndex=zIndex;
          img.parentNode.parentNode.style.zIndex=zIndex;
        }
      }, delay);
    }
    
    function larger(img, width, height) {
      img.dir='rtl';
      now=parseInt(img.style.zIndex);
      for (i=now+1; i<=10; i++) {
        w=(width*(10+i))/20+'px';
        h=(height*(10+i))/20+'px';
        m=(-i)+'px 0 0 '+(-width*i/40)+'px';
        setZoom(img, 'rtl', w, h, m, i, 20*(i-now));
      }
    }
    
    function smaller(img, width, height) {
      img.dir='ltr';
      now=parseInt(img.style.zIndex);
      for (i=now-1; i>=0; i--) {
        w=(width*(10+i))/20+'px';
        h=(height*(10+i))/20+'px';
        m=(-i)+'px 0 0 '+(-width*i/40)+'px';
        setZoom(img, 'ltr', w, h, m, i, 20*(now-i));
      }
    }
    and this is to add where you wish the image to appear:
    Code:
    <div class="preview" style="width:80px;height:80px;float:left; padding-left:20px;">
    <a href=""><img class="preview" style="width:80px;height:60px;border:1px solid #000000;z-index:0" src="images/portfolio2.gif" alt="" onmouseover="larger(this,160,120)" onmouseout="smaller(this,160,120)" /></a>
    </div>
    You will see in this example that the image zooms, but they come up behind the others.

    How can the images zoom up in front of the other images ?

  2. #2
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default z-index

    In the function when the mouse goes over the image, change the z-index of your image to 100. Then when the mouse goes out of the image change the z-index to 0, or whatever your default z-index of the images are. This way the image will be above all other images when your mouse is over the image and below the other images when your mouse is out of the image.

    -magicyte

  3. #3
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    807
    Thanks
    87
    Thanked 2 Times in 2 Posts

    Default

    I only see one z function in the code above ?

  4. #4
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Try adding the following to your CSS and see if it makes a difference. I'm just shooting in the dark here, but it might work.

    Code:
    a:hover img.preview {
       z-index:10;
    }
    Also, remove the z-index from the inline styles.

  5. #5
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    807
    Thanks
    87
    Thanked 2 Times in 2 Posts

    Default

    Thanks for trying, Medyman, but still the same result.

Bookmarks

Posting Permissions

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