Autor Zpráva
Renda
Profil *
#1 · Zasláno: 20. 8. 2005, 17:59:12
Odpovědět Citovat
Ahojky. Napsala jsem si tento zápis v css:

#test a {background: url("neco.gif") top left no-repeat;}
#test a:hover { background-image: url("druhyneco.gif");}
#test a:active {background-image: url("druhyneco.gif");}

Chtěla bych aby se mi změnil obrázek z neco na druhyneco po najetí myši na odkaz. Nechce mi to fungovat, tak jsem se chtěla zeptat co mám špatně. Sedím nad tím už hodinu a nemůžu na to přijít. Zápis v inline mám takhle:

<div style="position: absolute; width: 200px; height: 100px; z-index: 3; left: 557px; top: 272px">
<p style="margin-top: 1px; margin-bottom: 1px">
<a id="test" title="neco" href="nekam.htm">
<img border="0" src="neco.gif" width="200" height="100"></a></div>
Budu moc ráda, když se najde někdo, kdo mi poradí. Díky
Petra
Profil
#2 · Zasláno: 20. 8. 2005, 18:12:29
Odpovědět Citovat
Jednak máš špatně zápis v CSS -> máš mít a#test, a#test:hover a a#test:active (anebo to id přidat tomu <p>, co to obaluje, tedy <p id="test"> a jednak když už máš ten obrázek na pozadí, je zbytečné dávat ho tam jako <img>, protože ti pak překryje to měnící se pozadí.

Pak je tu druhá věc, že potřebuješ tomu odkazu nastavit velikost toho obrázku na pozadí, takže ještě k tomu a#test {display:block;width:200px;height:100px} a bylo by poměrně vhodné, kdyby v tom odkazu byl nějaký text :-)
Renda
Profil *
#3 · Zasláno: 20. 8. 2005, 19:46:49
Odpovědět Citovat
Už mi to funguje, ale ten první obrazek mi překrývá ten hover.
Cirdan
Profil *
#4 · Zasláno: 22. 8. 2005, 10:00:02
Odpovědět Citovat
http://www.wellstyled.com/css-nopreload-rollovers.html
skus sa pozriet este aj na toto... velmi jednoduche a elegantne riesenie.....
peta
Profil *
#5 · Zasláno: 22. 8. 2005, 13:28:12
Odpovědět Citovat
Ukaz odkaz na stranku?

Jinak pretra ti psala, ze to mas spatne a ze tam obrazek nemusis mit, cili asi takto:
Jenomze ty mas cely kod nejaky divny :)

.menu {position: absolute; z-index: 3; width: 200px; height: 100px; left: 557px; top: 272px;
padding:1px; /*nebo 1px 0*/
}
.menu a {background: url("neco.gif") 0 0 no-repeat;
display:block;width:200px;line-height:100px}
.menu a:hover, .menu a:active
{background-image: url("druhyneco.gif");}


<p class="menu">
<a title="neco" href="nekam.htm">&nbsp;</a>
<a title="neco" href="nekam.htm">&nbsp;</a>
<a title="neco" href="nekam.htm">&nbsp;</a>
</a>
</p>
Časová prodleva: 19 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0