SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image zooms but remains under other images

    I have a table with images in the cells. I'm using JSFX_ImageZoom.js to zoom, that works fine. The problem is if I don't define absolute positions for my images then when zoomed the rest of the page gets garbled. If I do define absolute positions then the zoomed image is "under" the surrounding images.

    Code:
    <!--  (* Another free JavaScript  from JavaScript-FX.com *) -->
    <SCRIPT LANGUAGE=JavaScript SRC="JSFX_ImageZoom.js" TYPE="text/javascript"></SCRIPT>
    </head>
    <body>
    <center>
      <table height="600" width="800" background="advertisingsampletables.jpg">
        <tr height="100">
    		<td height="258"></td>
    		<td>
    		</td>
    		<td height="258">
    		</td>
    		<td valign="bottom"><img height="170" width="110" style="position:absolute; top:100px; left:700px;" src="mexicantable.jpg" border="0" onMouseOver="JSFX.zoomIn(this, 50, 250)" onMouseOut="JSFX.zoomOut(this)"><img height="170" width="110" src="specialtytable.jpg" width="112" height="174" border="0" style="position:absolute; top:100px; left:820px;" onMouseOver="JSFX.zoomIn(this, 50, 250)" onMouseOut="JSFX.zoomOut(this)"><img height="170" width="110" style="position:absolute; top:100px; left:940px;" src="bbqtable.jpg" border="0" onMouseOver="JSFX.zoomIn(this, 50, 250)" onMouseOut="JSFX.zoomOut(this)"><img height="170" width="110" style="position:absolute; top:100px; left:1055px;" src="sportstable.jpg" border="0" onMouseOver="JSFX.zoomIn(this, 50, 250)" onMouseOut="JSFX.zoomOut(this)">

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is a CSS issue. you need to set the z-index of the images.


  3. #3
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried style="z-index: 1" but that didn't help. The images were still under the surrounding images when zoomed and the moved other elements of the page.

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    set the z-index to something like 90


  5. #5
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still no good. I don't have to use JSF_ImageZoom.js. If anyone knows of a script that will zoom images on mouse over without moving other elements of the page please let me know.

  6. #6
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help G!

    I ended up going with http://www.artdhtml.com/free/bigimage.asp. It doesn't "zoom" in and out like I wanted, but it doesn't move other elements of the page and it does show a larger image on mouseover.


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
  •