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
-
-
Užitečné nástroje pro bezpečnost na internetu
17. října 2024 -
Členská sekce: 4 důvody proč ji mít na svém webu
12. března 2024 -
Jak nainstalovat šablonu ve WordPressu
23. července 2024
Nejnovější
-
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024 -
Chcete jedinečnou doménu? Objevte koncovky FOOD, MEME a MUSIC!
7. listopadu 2024 -
OpenAI představilo novou funkci ChatGPT Search
6. listopadu 2024