Hover galerie
Galerie obrázků zobrazující větší náhledy.
Pro správnou funkci v MSIE je třeba do kořenového adresáře stránky umístit soubor hover.htc. Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Janos Horvath. Bližší popis najdete v článku Hover emulation for IE5+.
CSS
html
{
margin:0;
padding:0;
}
body
{
background-color:#dddddd;
margin:0;
padding:0;
color:white;
}
div#obalovydiv
{
width:150px;
}
div.kontejner
{
margin:20px;
}
div.kontejner img
{
border:2px solid blue;
margin:0;
padding:0;
}
div.fotka
{
position:absolute;
left:150px;
top:20px;
visibility:hidden;
}
div.kontejner:hover div.fotka, div.kontejnerHover div.fotka
{
position:absolute;
left:150px;
top:20px;
visibility:visible;
}
div.kontejnerHover img.nahled
{
border:2px solid blue;
margin:0;
padding:0;
}
div.kontejner
{
behavior:url(hover.htc);
}
XHTML
<html>
<body>
<div id=“‚obalovydiv'“>
<div class=“‚kontejner'“>
<img class=“‚nahled'“ src=“1.jpg“ width=“100″ height=“100″ alt=““ />
<div class=“‚fotka'“>
<img src=“fotka1.jpg“ width=“400″ height=“300″ alt=““ />
</div>
</div>
<div class=“‚kontejner'“>
<img class=“‚nahled'“ src=“2.jpg“ width=“100″ height=“100″ alt=““ />
<div class=“‚fotka'“>
<img src=“fotka2.jpg“ width=“400″ height=“300″ alt=““ />
</div>
</div>
<div class=“‚kontejner'“>
<img class=“‚nahled'“ src=“3.jpg“ width=“100″ height=“100″ alt=““ />
<div class=“‚fotka'“>
<img src=“fotka3.jpg“ width=“400″ height=“300″ alt=““ />
</div>
</div>
</div>
</body>
</html>
