son Posted December 31, 2009 Share Posted December 31, 2009 I have been involved in a project where we use a simple hover effect. The code is: <div class="hover"><a href="webpage.php?fn_id=1" title="Webpage"><img src="small.jpg" alt="Small" " /><img src="big.jpg" alt="Big" class="preview" /></a><h4>Example</h4></div> and relevant css is: .hover {position:relative;}.hover a .preview {display:none;}.hover a:hover .preview {display:block;position:absolute;top:160px;left:0;z-index:2;} It works in all browsers other than IE7 (and probably IE6). I added now 'style="z-index:-1;' to the small image, but cannot test. I signed up and paid for one day with browser cam, not realising that it only captures what the screen looks like without me being able to try to hover. Does anyone have IE7 and can do a test for me? Or, is there a way in browser cam to do what I am after? I could send url via private message...Son Link to comment Share on other sites More sharing options...
dsonesuk Posted December 31, 2009 Share Posted December 31, 2009 i tested in ie7, and it worked fine, sorry big no-go (as usual) for ie6, but i came with working solution, that i think will work in all browsers.instead of using display: i used position: and used the small image as background for the anchor link.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">.hover {position:relative;}.hover a{background:url('image_thumb.gif') no-repeat #fff;; width:100px; height:75px; display:block; } /*#fff required for IE6*/img.preview{position:absolute; left:-9999em; top:160px; }:link:hover, a:hover img.preview{ background-color:transparent; left:0px;} /* link:hover, and transparent required for IE6*/</style></head><body><div class="hover"><a href="webpage.php?fn_id=1" title="Webpage"><img src="image_big.jpg" alt="Big" class="preview" /></a><h4>Example</h4></div></body></html> Link to comment Share on other sites More sharing options...
son Posted January 4, 2010 Author Share Posted January 4, 2010 i tested in ie7, and it worked fine, sorry big no-go (as usual) for ie6, but i came with working solution, that i think will work in all browsers.instead of using display: i used position: and used the small image as background for the anchor link.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">.hover {position:relative;}.hover a{background:url('image_thumb.gif') no-repeat #fff;; width:100px; height:75px; display:block; } /*#fff required for IE6*/img.preview{position:absolute; left:-9999em; top:160px; }:link:hover, a:hover img.preview{ background-color:transparent; left:0px;} /* link:hover, and transparent required for IE6*/</style></head><body><div class="hover"><a href="webpage.php?fn_id=1" title="Webpage"><img src="image_big.jpg" alt="Big" class="preview" /></a><h4>Example</h4></div></body></html>Thanks for code. Did you say you tested this in IE6? I have a bit of an issue as I do not have IE6 and BrowserCam etc can only test for what the visuals look like without actually doing anything to the page (as to hover over a section etc). How do you do your normal testing? Is there a facility to use that can test those things?Son Link to comment Share on other sites More sharing options...
dsonesuk Posted January 4, 2010 Share Posted January 4, 2010 its works for IE6, IE7, Firefox, Chrome, Safari, Opera.to test in multiple IE browsers, try googling "Internet Explorer Collection" Link to comment Share on other sites More sharing options...
son Posted January 4, 2010 Author Share Posted January 4, 2010 its works for IE6, IE7, Firefox, Chrome, Safari, Opera.to test in multiple IE browsers, try googling "Internet Explorer Collection"I just tested it in latest Firefox and IE8 and the hover image goes behind the background image... I used exactly your code and just replaced with correct images. Son Link to comment Share on other sites More sharing options...
son Posted January 4, 2010 Author Share Posted January 4, 2010 I just tested it in latest Firefox and IE8 and the hover image goes behind the background image... I used exactly your code and just replaced with correct images. SonI have it now also working for IE7, but IE6 is still a problem (having installation issues with Internet Explorer Collection I use now IETester, which seems to be ok so far). The css I use is:.hover {}.hover a .preview {display:none;}.hover a:hover .preview {position:absolute; display:block; z-index:999;} I tested your code again, but it just does not work for me. Strange that it works for you. For me it does not even work with FF...Son Link to comment Share on other sites More sharing options...
dsonesuk Posted January 4, 2010 Share Posted January 4, 2010 using display:none and block does not work for IE6, unless you include javascript fix.the code i supplied, worked in all browsers, ie6 to ie8, firefox 3.0.16, chrome, opera, safari just fine.though idid spot extra semi-colon in code, sorry!, but that did not make any difference..hover a{background:url('image_thumb.gif') no-repeat #fff;; width:100px; height:75px; display:block; } /*#fff required for IE6*/should be:.hover a{background:url('image_thumb.gif') no-repeat #fff; width:100px; height:75px; display:block; } /*#fff required for IE6*/copy all, the below code exactly to htm page document, change reference to your images (in bold), and load the page.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">.hover {position:relative;}.hover a{background:url('image_thumb.gif') no-repeat #fff; width:100px; height:75px; display:block; } /*#fff required for IE6*/img.preview{position:absolute; left:-9999em; top:160px; }:link:hover, a:hover img.preview{ background-color:transparent; left:0px;} /* link:hover, and transparent required for IE6*/</style></head><body><div class="hover"><a href="webpage.php?fn_id=1" title="Webpage"><img src="image_big.jpg" alt="Big" class="preview" /></a><h4>Example</h4></div></body></html> Link to comment Share on other sites More sharing options...
son Posted January 4, 2010 Author Share Posted January 4, 2010 using display:none and block does not work for IE6, unless you include javascript fix.the code i supplied, worked in all browsers, ie6 to ie8, firefox 3.0.16, chrome, opera, safari just fine.though idid spot extra semi-colon in code, sorry!, but that did not make any difference..hover a{background:url('image_thumb.gif') no-repeat #fff;; width:100px; height:75px; display:block; } /*#fff required for IE6*/should be:.hover a{background:url('image_thumb.gif') no-repeat #fff; width:100px; height:75px; display:block; } /*#fff required for IE6*/copy all, the below code exactly to htm page document, change reference to your images (in bold), and load the page.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">.hover {position:relative;}.hover a{background:url('image_thumb.gif') no-repeat #fff; width:100px; height:75px; display:block; } /*#fff required for IE6*/img.preview{position:absolute; left:-9999em; top:160px; }:link:hover, a:hover img.preview{ background-color:transparent; left:0px;} /* link:hover, and transparent required for IE6*/</style></head><body><div class="hover"><a href="webpage.php?fn_id=1" title="Webpage"><img src="image_big.jpg" alt="Big" class="preview" /></a><h4>Example</h4></div></body></html>Try to add several:<div class="hover"><a href="webpage.php?fn_id=1" title="Webpage"><img src="[b]image_big.jpg[/b]" alt="Big" class="preview" /></a><h4>Example</h4></div> and test again. It does go to back behind the thumbs...Son Link to comment Share on other sites More sharing options...
dsonesuk Posted January 4, 2010 Share Posted January 4, 2010 I see what you mean now, try below, the only problem is every thumbnail is going to be sett as background image, unless you produce dynamically using php.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">.hover {position:relative;}.hover a{background:url('smallimage.jpg') no-repeat #fff; width:100px; height:75px; display:block; overflow:inherit !important; overflow:hidden;} /*#fff and overflow:hidden; required for IE6*/img.preview{position:relative; left:-9999em; top:160px; }:link:hover, a:hover img.preview{background-color:transparent; left:0px;} /* link:hover, and transparent required for IE6*/</style></head><body><div class="hover"><a href="webpage.php?fn_id=1" title="Webpage"><img src="bigimage1.jpg" alt="Big" class="preview" /></a><h4>Example 1</h4><a href="webpage.php?fn_id=1" title="Webpage"><img src="bigimage2.jpg.jpg" alt="Big" class="preview" /></a><h4>Example 2</h4><a href="webpage.php?fn_id=1" title="Webpage"><img src="bigimage3.jpg" alt="Big" class="preview" /></a><h4>Example 3</h4></div></body></html> Link to comment Share on other sites More sharing options...
son Posted January 5, 2010 Author Share Posted January 5, 2010 That works now, cheera:-) Have had good news as well. Client decided we do not have to optimise for IE6 any more, yeah! Can say this really made my day:-) IE6 is in many aspect a p... in the neck...Son Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.