1) Script Title:

Using Dynamic drice CSS Library

2) Link
www.vtextiles.com/en/curtains_psw_price.htm

3) Describe problem:

Whenever using this library... the thumbnail gets enlarged but the z-index is not working which result in other thumbnails overlapping the enlarged image... but obviously, i want it to show on top... In the example below... the second image will always be on top of the enlarged image of the first image. Since there are many columns and rows... i pretty much cannot see the enlarged picture for now... could you help? Thanks

here is a sample of my code:

.thumbnailr{
position: relative;
z-index: 0;
}

.thumbnailr:hover{
background-color: transparent;
z-index: 50;
}

.thumbnailr span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
z-indez: 100;
}

.thumbnailr span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
z-index:150;
}

.thumbnailr:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 150px; /*position where enlarged image should offset horizontally */
z-index:200;
}



....

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td onMouseOver="this.style.backgroundColor='#FFFFFF'" onMouseOut="this.style.backgroundColor='#FFFFFF'">
<table width="25%" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<td bgcolor="#FFFFFF">
<a class="thumbnailr" target=principal href="products/ca01p_price.htm"><img src="../images/ca01p.jpg" width="120px" height="160px" border="0" /><span><img src="../images/ca01p.jpg" width="360px" height="480px" border="0"/><br/></span></a></td>
<td bgcolor="#FFFFFF"><a target=principal href="products/ca01p_price.htm"><img src=images/zoom_button_vertical.gif width=39 height=100 border='0'></a></td>
</tr>
<tr>
<td><div align="center"><B>Model A-01</B><BR>Rod pocket<BR><BR></td><td></td>
</tr>
</table>
</td>
<td onMouseOver="this.style.backgroundColor='#FFFFFF'" onMouseOut="this.style.backgroundColor='#FFFFFF'">
<table width="25%" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<td bgcolor="#FFFFFF">
<a class="thumbnailr" target=principal href="products/ca02p_price.htm"><img src="../images/ca02p.jpg" width="120px" height="160px" border="0" /><span><img src="../images/ca02p.jpg" width="360px" height="480px" border="0"/><br/></span></a></td>
<td bgcolor="#FFFFFF"><a target=principal href="products/ca02p_price.htm"><img src=images/zoom_button_vertical.gif width=39 height=100 border='0'></a></td>
</tr>
<tr>
<td><div align="center"><B>Model A-02</B><BR>Rod pocket<BR><BR></td><td></td>
</tr>
</table>
</td>