PDA

View Full Version : css popup image viewer



suecalvi
10-25-2007, 01:12 AM
I've implemented this code in http://www.thesucculentgarden.com.au and it works beautifully in Mozilla, Netscape and Safari, but
- I can't get it to work at all in Opera
- in IE6, 'options' text shows through
- in IE7 smaller images disappear at random eg http://www.thesucculentgarden.com.au/gaste.html

If anyone can help, that'd be wonderful!

The css is -
.exp{
position: relative;
z-index: 0;
overflow:hidden;
}
.exp:hover{
background-color: transparent;
z-index: 50;
}
.exp span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ffffff;
border:1px solid #4f0516;
visibility: hidden;
color: black;
text-decoration: none;
}
.exp span img{ /*CSS for enlarged image*/
border-width: 0;
}
.exp:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 0; /*position where enlarged image should offset horizontally */
}

and the html (for 1 image) -

<a name="ga12" class="exp" href="#thumb"><img class="pic" src="images/ga12_small.jpg" width="132px" height="100px" alt="Gasteria batesiana"></img>
<span><img src="images/ga12_large.jpg" alt="Gasteria batesiana"></img></span></a>
<p class="p1"><span>Gasteria batesiana</span></p>
<p class="p2"><span>Smooth shiny dark green lanceolate leaves mottled with white. To 10cm high by 30cm wide. Pink flowers in spring. (South Africa, Namibia). Light shade.</span></p>
<p class="p3"><span>
Quantity: <input type="text" name="GA12" size="2"></input>
Size: <select name="GA12_opt">
<option value="Small">Small $6.00</option>
</select>
<input class="t1" type="button" value="Add to Order" onClick="AddItem('GA12')"></input>
<input type="hidden" name="GA12_price" value="6.00"></input>
<input type="hidden" name="GA12_desc" value="Gasteria batesiana"></input>
</span>
</p>