Help
The only modification is the following implementation:
<div style="position: absolute; left: 980px; top: 0px;"> <a class="thumbnail" href="#thumb"> <img alt="" src="4.jpg" width="20" height="20" /><span><img src="4.jpg" width="200" height="200" /><br /> Dynamic Drive</span></a> </div>
My outer div is absolutely positioned.
The code is working perfectly with Firefox and Chrome but for IE, the hover image gets hidden behind other images.
I am placing the complete code for my page here:
<!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>
<title>Untitled Page</title>
<style type="text/css">
.thumbnail
{
position: relative;
z-index: 0;
}
.thumbnail img
{ border:0px;}
.thumbnail span
{
/*CSS for enlarged image*/
position: absolute;
background-color: White;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black; /*text-decoration: none;*/
font-family: Tahoma;
font-size: 10px;
text-align: center;
}
.thumbnail:hover
{
background-color: transparent;
z-index: 50;
}
/**html.thumbnail:hover { z-index:50; }*/
.thumbnail span img
{
/*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span
{
/*CSS for enlarged image on hover*/
visibility: visible;
z-index: 50;
top: 0;
left: 20px; /*position where enlarged image should offset horizontally */
}
</style>
</head>
<body>
<div style="position: absolute; left: 30px; top: 30px; width: 1000px; height: 1000px;
background-color: Yellow;">
<div style="position: absolute; left: 0px; top: 0px; ">
<a class="thumbnail" href="#thumb">
<img alt="" src="1.jpg" width="10" height="10" />
<span>
<img src="1.jpg" width="200" height="200" /><br />
Dynamic Drive<br />
<b>I am here.</b><br />
where are you?</span> </a>
</div>
<div style="position: absolute; left: 0px; top: 10px;">
<a class="thumbnail" href="#thumb">
<img alt="" src="2.jpg" width="10" height="10" /><span><img src="2.jpg" width="200"
height="200" /><br />
Dynamic Drive</span></a>
</div>
<div style="position: absolute; left: 0px; top: 20px;">
<a class="thumbnail" href="#thumb">
<img alt="" src="3.jpg" width="10" height="10" /><span><img src="3.jpg" width="200"
height="200" /><br />
Dynamic Drive</span></a>
</div>
<div style="position: absolute; left: 0px; top: 30px;">
<a class="thumbnail" href="#thumb">
<img alt="" src="4.jpg" width="10" height="10" /><span><img src="4.jpg" width="200"
height="200" /><br />
Dynamic Drive</span></a>
</div>
<div style="position: absolute; left: 0px; top: 40px;">
<a class="thumbnail" href="#thumb">
<img alt="" src="1.jpg" width="10" height="10" /><span><img src="1.jpg" width="200"
height="200" /><br />
Dynamic Drive</span></a>
</div>
<div style="position: absolute; left: 10px; top: 0px;">
<a class="thumbnail" href="#thumb">
<img alt="" src="2.jpg" width="20" height="20" /><span><img src="2.jpg" width="200"
height="200" /><br />
Dynamic Drive</span></a>
</div>
<div style="position: absolute; left: 30px; top: 0px;">
<a class="thumbnail" href="#thumb">
<img alt="" src="3.jpg" width="20" height="20" /><span><img src="3.jpg" width="200"
height="200" /><br />
Dynamic Drive</span></a>
</div>
<div style="position: absolute; left: 10px; top: 20px;">
<a class="thumbnail" href="#thumb">
<img alt="" src="4.jpg" width="30" height="30" /><span><img src="4.jpg" width="200"
height="200" /><br />
Dynamic Drive</span></a>
</div>
<div style="position: absolute; left: 40px; top: 20px;">
<a class="thumbnail" href="#thumb">
<img alt="" src="1.jpg" width="10" height="10" /><span><img src="1.jpg" width="200"
height="200" /><br />
Dynamic Drive</span></a>
</div>
<div style="position: absolute; left: 40px; top: 30px;">
<a class="thumbnail" href="#thumb">
<img alt="" src="2.jpg" width="10" height="10" /><span><img src="2.jpg" width="200"
height="200" /><br />
Dynamic Drive</span></a>
</div>
<div style="position: absolute; left: 50px; top: 0px;">
<a class="thumbnail" href="#thumb">
<img alt="" src="3.jpg" width="20" height="20" /><span><img src="3.jpg" width="200"
height="200" /><br />
Dynamic Drive</span></a>
</div>
<div style="position: absolute; left: 980px; top: 0px;">
<a class="thumbnail" href="#thumb">
<img alt="" src="4.jpg" width="20" height="20" /><span><img src="4.jpg" width="200"
height="200" /><br />
Dynamic Drive</span></a>
</div>
<div style="position: absolute; left: 50px; top: 20px;">
<a class="thumbnail" href="#thumb">
<img alt="" src="4.jpg" width="20" height="20" /><span><img src="4.jpg" width="200"
height="200" /><br />
Dynamic Drive</span></a>
</div>
</div>
</body>
</html>Any help will be highly appreciated.
Regards.Thanks and Regards,
Neetika Kapoor.
