Klikací CSS logo
Řada webů nevkládá logo jako obrázek do (X)HTML, ale nadefinuje obrázek jako pozadí nějakému prvku. Takže místo:
<a href="/"><img src="/logo.gif" ... /></a>
použijí například:
<a href="/"><span id="logo"></span></a>
a v CSS:
#logo {
background: url (logo.gif) no-repeat;
width: 200 px;
height: 100 px;
display: block;
}
Vše funguje správně až na Internet Explorer, který nad logem neukáže obvyklou ruku, ale kurzor myši zůstane stejný. Takže 99 % uživatelů nepozná, že je logo klikací. A to je chyba. Řešení je přitom velice jednoduché.
Místo definování velikosti prvku span, kterému potom nastavíme obrázkové pozadí, rovnou nastavíme prvek a. Výsledek bude tedy následující:
<a href="/" id="logo"></a>
Dále je samozřejmě možné vše dále upravit, ale pointa zůstává - nastavit obrázek na pozadí prvku a místo span.
Seriál: Používáme CSS
- Přístupné záložky v CSS a JavaScriptu [25. února 2006 14:57]
- JavaScript a CSS: Drag and Drop [29. července 2005 22:05]
- Podtrhněte odkaz libovolnou barvou [22. prosince 2004 16:56]
- Ilustrační obrázek v textu [21. prosince 2004 20:04]
- Výtahy z textu na webu [6. října 2004 14:48]
- Relativní jednotky v CSS [9. srpna 2004 9:53]
- Klikatelné obrázky vložené přes CSS [21. července 2004 8:32]
- Klikací CSS logo [20. června 2004 16:30]
- 3D CSS Box Model [21. května 2004 6:37]
- CSS position:fixed i v IE [10. května 2004 18:42]
- CSS pro tabulky [11. prosince 2003 6:58]
- Okraje v CSS [24. listopadu 2003 7:04]
- Svislé centrování v CSS [19. listopadu 2003 15:57]
- Dvakrát o polohování prvků v CSS [9. listopadu 2003 9:20]
Komentáře
Petře, je tu ale jeden háček. Pakliže takhle nahrazuješ hlavní nadpis webu (jeho název atp.) a už nikde ho v textové podobě neuvádíš, tak vlastně uživatelům bez obrázků tuto informace "zapřeš".
Takže, pokud se hned vedle zřetelně nachází název webu v textové podobě, nemám nic proti. Ale pokud je to jediné místo, kde uživateli název webu sděluješ, pak bych to CSS nahrazování prováděl rozhodně jinak. Např. takto: http://pristupnost.nawebu.cz/weblog/blogpost.php?post=43
[1] S tím úplně souhlasím. Proto jsem odkázal na Pixyho článek. Zde jsem chtěl pouze upozornit na chybu IE, protože jsem na ní na pár webech narazil.
Pokud je to ale opravdu jediné místo, kde je název webu uveden (jako že by IMHO nemělo), tak je určitě dobré použít tvůj postup.
A co doplnit do CSS jeden řádek?
cursor: hand;
Pak by mělo být vše už bez problémů.
[3] "cursor: hand;" je výmysl Microsoftu. Jedině použít tedy:
cursor: pointer; cursor: hand;
Ale tím se vyřeší pouze ukazatel. Pravým tlačítkem se nezobrazí vlastnosti odkazu, ale stránky. A pravděpodobně nepůjde také odkaz přetáhnout (MyIE2).
S vlastnostmi je to pravda - potvrzuji, přetažení odkazu mně však funguje (IE 6.0 SP1).
Já si myslím, že logo jako obrázek patří do dokumentu. To není dekorační grafika, která by patřila do pozadí. Takže hlasuji pro první variantu.
To s tím explorerem je pravda.
[6] Rozhodně souhlasím, že logo patří do dokumentu. A i pro uživatele s prohlížeči bez CSS je důležité.
Berme článek obecně (nemusí jít jen o logo, dokonce právě v případě loga [6] bych raději použil obrázek).
Petr Weida: dobrý tip! Na tento problém jsem párkrát narazil, a díky vrozené lenosti jsem to většinou zahladil pomocí: cursor: pointer; _cursor: hand;
Takže díky, jdu překopat styly...
Kdyz img, tak nejakou jednoduchou variantu na bilem podklade, schovanou pres CSS, + text. A do layoutu pak logo vhodne zasazene do designu (via bg styling odkazu).
Další příspěvky
- Aktuální příspěvky
- Novější příspěvky
- Spočítejte si návratnost investic [30. června 2004 22:47]
- 3px bug v IE vyřešen [30. června 2004 7:08]
- Správa barev [25. června 2004 6:51]
- Starší příspěvky
- Rozšíření a témata vzhledu pro balík Mozilla [19. června 2004 16:02]
- Mozilla 1.7, Thunderbird 0.7 a Firefox 0.9 [18. června 2004 15:09]
- Make-money-with-google.com [17. června 2004 16:50]
- Všechny příspěvky za měsíc červen 2004
