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>
Mohlo by vás také zajímat
-
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024 -
Nejlevnější VPS: To je nový Cloud Server Mini od ZonerCloud
4. června 2024 -
Počítač v kapse: Android 16 připravuje průlomový Desktop Mode
8. července 2025 -
AI v programování: Jak používat GitHub Copilot (část 2)
19. února 2024
Nejnovější
-
Proč jsou důležité správné údaje o vlastnících domén
11. září 2025 -
-
-
