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



vytlačiť článok  hľadať súvisiace články 
Vyhľadávanie na stránke
Reklama
Náhodný obrázok
náhodný obrázok
Kontakty

Martin Kasman, M Software
Smreková 3095/23
Email: martin@kasman.sk

Telefón: 0908 270 294