SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    scrolling a clipped div with image rollovers

    need help with displaying image rollovers within a clipped div.

    i was able to get the images to display how i want... but if you scroll down to the fourth one and rollover the product name, the image is positioned to the top of the content div and that part is clipped. i was suggested to ask this question in the js forum about using a negative margin to scroll the div instead of using top position. i want the image to display in the exact spot as the first 3 images display.

    here is the problem page:
    http://katherineheinmd.com/test/products.html

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,686
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    I would have to say that the larger image should not be located inside the clipped div area, and should instead be outside of it all together.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well thats my question... how can i get the rollovers to trigger the image to show if its positioned outside that div.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,686
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    I would have the link point to the larger image, then have the onmouseover event update a location outside of the scrolling area with the image that is being linked to.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks. this worked...

    JS
    Code:
    <script language="Javascript">
    <!--
    function toggleImg(id,flagit) {
    if (flagit=="1"){
    if (document.layers) document.layers[''+id+''].visibility = "show"
    else if (document.all) document.all[''+id+''].style.visibility = "visible"
    else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
    }
    else
    if (flagit=="0"){
    if (document.layers) document.layers[''+id+''].visibility = "hide"
    else if (document.all) document.all[''+id+''].style.visibility = "hidden"
    else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
    }
    }
    //-->
    </script>
    HTML
    Code:
    <a href="#" onMouseOver="toggleImg('product1',1)" onMouseOut="toggleImg('product1',0)">product</a>
    
    <img src="product.jpg" id="product1" />
    then just absolutely positioning product1 in the css with its visibility set to hidden


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
  •