Vlastná popiska k odkazu

ďalšie názvy článku: kontextová nápoveda

HTML -> Ukážkové kódy v HTML -> Vlastná popiska k odkazu

Po prejdení myšou na zvýraznenú časť textu sa k tomuto textu zobrazí vlastná popiska s obrázkom.

Potrebujete dva súbory:

1. súbor (nazvite ho napr. popiska.htm)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<link href="styl.css" type=text/css rel=StyleSheet>
<title></title>
</head>
<body>

<a class="thumbnail" href="#thumb">Prejdite sem myšou

<img src="http://www.kasman.sk/download/ikonky/tlacitka/otaznik/b_1.bmp">
 
Tu sa zobrazí obrázok a text, ktorý reprezentuje odkaz, na ktorý ste prešli myšou.

</a>

</body>
</html>

2. súbor (nazvite ho styl.css a uložte do rovnakého adresára, ako prvý súbor)

/* CSS Document */

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

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

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

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

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible; top: 20px;
left: 60px; /*position where enlarged image should offset horizontally */
}

A.thumbnail:link {COLOR: #C37108; cursor: help; TEXT-DECORATION: none;}
A.thumbnail:active {COLOR: #C37108; cursor: help; TEXT-DECORATION: none;}
A.thumbnail:hover {COLOR: #C37108; cursor: help; TEXT-DECORATION: none;}
A.thumbnail:visited {COLOR: #C37108; cursor: help; TEXT-DECORATION: none;}

Ukážku kódu si môžete pozrieť tu: ukážka