Autor Zpráva
ZANE
Profil *
Nevíte někdo co s následujícím? Hover nápověda pod Operou 9.23 je plně funkční - ovšem jen do okamžiku než se jí do cesty postaví tabulka. Pak se zobrazí jenom část, nebo se různě překrývá, nebo se zobrazí pokaždé jinde. IE, NN, Firefox - v cajku.

Zdrojáky:
Stránka:
<!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>
<table width="539" class="pi2">
<tr>
<td align="left">
text tabulky jfgdkggd<br>
text tabulky jfgdkggd<br>
text tabulky jfgdkggd<br>
text tabulky jfgdkggd<br>
text tabulky jfgdkggd<br>
text tabulky jfgdkggd<br>
text tabulky jfgdkggd<br>¨
text tabulky jfgdkggd<br>
</td>
</tr>
</table>
<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>

CSS:
/* 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;}
Zane
Profil *
Už to funguje i pod operou: ta si nerozumí s position: relative; když jsem použil hodnotu position: absolute; a vnořenou pozici pro umístění tak to fachá. I všechny ostatní vychytávky které požívají hover efektu a předtím nechodily.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0