SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
-
Mar 17, 2008, 07:44 #1
- 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
-
Mar 17, 2008, 14:04 #2
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 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
-
Mar 17, 2008, 14:15 #3
- 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.
-
Mar 17, 2008, 14:38 #4
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 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
-
Mar 17, 2008, 17:29 #5
- 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>
Code:<a href="#" onMouseOver="toggleImg('product1',1)" onMouseOut="toggleImg('product1',0)">product</a> <img src="product.jpg" id="product1" />
Bookmarks