Autor Zpráva
Prochy
Profil
Dobrý den,
už si tu pár dní lámu hlavu s tím, jak udělat odkazy, kde mám v základním stavu tlačítko přes obrázek a při hoveru se změní tlačítko a dá se to na obrázek. Mě to částečně funguje. Udělal jsem to tak, že v základní poloze mám font-size:0px a při hoveru se tam hodí font-size 17px.
Např v opeře a ve firefoxu to ani není vidět, že tam je font-size:0, ale když si otevřete např. IE nebo Google Chrome a dáte CTRL+A tak to tam je vidět a to mi vadí.
A otázka tedy zní jestli nemá někdo lepší řešení, jak to provést?
Doufám, že jsem svůj problém popsal srozumitelně.

Zde dodávám ukázku

Budu rád za jakoukoliv radu.
WMPopi
Profil
Většinou používám:

font-size: 0;
text-indent: -9999px;


Ale tady bylo asi elegantnější obalit text v odkazech ještě něčím, např. <span>.
Pak by bylo:

a span {display:none}
a:hover span {display:inline}
margin
Profil *
http://wellstyled.com/css-replace-text-by-image.html
http://wellstyled.com/css-nopreload-rollovers.html
Prochy
Profil
Mělo mě to napadnout. Díky moc za pomoc
WMPopi
Profil
margin:
To překrývání se zas hodí mě, neznal jsem, taky díky :-)
joe
Profil
Když už dávat odkaz na techniku image replacement, je lepší uvést tuto stránku, kde technik je více:

http://css-tricks.com/css-image-replacement/

Jednotlivé techniky mají svá pro a proti. Na této stránce je přehledně napsáno, jak to vypadá s vypnutými styly a obrázky.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0