Autor Zpráva
aha
Profil
Zdravím, mám na stránce obrázkovou navigaci, která ve FF, O, IE7 funguje bez problémů, ale v IE6 se změní vzhled tlačítka po přejetí myší (tak jak chci - posunutím obrázku) a po odjetí myši se nevrátí do původního stavu :link. Vrátí se tam, až když kliknu na jiný odkaz. Ví někdo co s tím? Na co se zaměřit?
Dík předem
yFang
Profil
aha
Nejlépe bude, dáš-li sem odkaz na ukázku té stránky.
Zdeněk Košťál
Profil
aha
Máš v tom odkazu span na rollover image replacing? Pokud ano, řešením je neposunovat obrázek pouze ve spanu, ale nelogicky i v obalovém prvku, který žádný obrázek nemá :).
a:hover, a:hover span { background-position: ...; }
aha
Profil
Zatím to není na netu, takže kód jenom na ukázku. Jenom jedna položka z navigace. Jde vlastně o nahrazení textu obrázkem na pozadí tak, aby se při zakázaném vykreslování obrázků zobrazil text, jinak zůstává překryt obrázkem.

CSS:

#navi_hl ul{
list-style:none;
margin:0;
padding:0;
width:648px;
}
#navi_hl ul li{
height:30px;
line-height:30px;
margin:0;
padding:0;
float:left;

}

#navi_hl a {
position:relative;
display:block;
margin:0;
padding:0;
width:108px;
height:30px;
}
#navi_hl a span#onas{
position:absolute; top:0; left:0;
display: block; width:108px; height:30px;
background:url(../img/navi-img/onas_hl_navi.jpg) 0 0 no-repeat;
}
#navi_hl a:link.onas span#onas{background:url(../img/navi-img/onas_hl_navi.jpg) 0 0 no-repeat;}

#navi_hl a:visited.onas span#onas{background:url(../img/navi-img/onas_hl_navi.jpg) 0 -60px no-repeat;}

#navi_hl a:hover.onas span#onas{background:url(../img/navi-img/onas_hl_navi.jpg) 0 -90px no-repeat;}

#navi_hl a:active.onas span#onas{background:url(../img/navi-img/onas_hl_navi.jpg) 0 -30px no-repeat;}

body.onas #navi_hl a.onas{background: url("../img/navi-img/onas_hl_navi.jpg") 0 -30px no-repeat;}


XHTML:
.....
<body class="onas">

<ul><li><a class="onas" href="#onas.htm">O NÁS<span id="onas"></span></a></li></ul>
aha
Profil
Zkusil jsem doplnit kód takto:

#navi_hl a {
position:relative;
display:block;
margin:0;
padding:0;
width:108px;
height:30px;

background:url(../img/navi-img/onas_hl_navi.jpg) 0 0 no-repeat;
}

a světe div se, ono to funguje :<)))

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: