Forum Moderators: not2easy

Message Too Old, No Replies

problem in IE 6

Image rollover problem

         

sumitra

7:51 am on Feb 20, 2008 (gmt 0)

10+ Year Member



On img a:hover it has to display a big size image. I have done it, but in IE6, its not working properly. It is displaying the images on rollover only once. After that I have to refresh the page. How to repeat it in ie6? Tried z-index tag also. In firefox its working fine.

penders

10:49 am on Feb 20, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Could your paste your CSS (and may be your HTML)?

sumitra

11:06 am on Feb 20, 2008 (gmt 0)

10+ Year Member



.preview{
display:none;
}
.preview a{
display:none;
}
#content .center a:hover{
cursor:default;
}
#content .center a:hover .preview{
display:block;
border:#fff 5px solid;
top:156px;
left:365px;
position:absolute;
width:270px;
height:289px;
z-index: 1;
}
*html #content .center a:hover{
display:block;
z-index: 1;
}
*html #content .center a:hover .preview{
display:block;
top:159px;
left:367px;
position:absolute;
z-index:1;
}
_____________
html page
-----------
<div class="center">
<img src="images/bedroom.jpg" alt="Bedroom" width="270" height="289" />
<a href="#"><img src="images/img1.jpg" alt="Bedroom" width="29" height="35" /><img src="images/bedroom.jpg" alt="Bedroom" class="preview" /></a>
<a href="#"><img src="images/img2.jpg" alt="Sunset" width="30" height="36" /><img src="images/img2.jpg" alt="Sunset" class="preview" /></a>
<a href="#"><img src="images/img3.jpg" alt="Beach" width="30" height="36" /><img src="images/img3.jpg" alt="Beach" class="preview" /></a>
<a href="#"><img src="images/img4.jpg" alt="Dance" width="30" height="36" /><img src="images/img4.jpg" alt="Dance" class="preview" /></a>
<a href="#"><img src="images/img5.jpg" alt="Shark" width="30" height="36" /><img src="images/img5.jpg" alt="Shark" class="preview" /></a>
<a href="#"><img src="images/img6.jpg" alt="Hotel" width="30" height="36" /><img src="images/img6.jpg" alt="Hotel" class="preview" /></a> </div>