Plně obrázková tlačítka bez preloadu

Tento postup je z velké části založen na pixyho článcích Rychlé rollovery bez načítání a Náhrada textu obrázkem a rozšiřuje možnosti jejich užití. V čem tyto dva způsoby vlastně spočívají?

Rollovery bez načítání fungují na principu obrázku na pozadí, který obsahuje stav pro neaktivní odkaz, :hover stav, případně ještě třetí pro aktivní odkaz. Podle momentálního stavu mění pozadí svou pozici (více v pixyho článku).

Náhrada textu obrázkem opět využívá obrázku na pozadí, jenž při zapnutých stylech a obrázcích zakrývá text a sám sděluje textovou informaci. Není-li obrázek dostupný nebo je-li vypnutý styl, text je viditelný (detailní popis v pixyho článku).

Doporučuji obojí nastudovat, protože v opačném případě následujícím kódům pravděpodobně nebudete moc rozumět.

Mým záměrem bylo vytvořit plně obrázková tlačítka bez preloadu a se skrytým textem. Zároveň taková tlačítka, aby při nedostupném obrázku nebo vypnutém stylu stále fungovala jako odkazy. Třeba se můj způsob bude někomu hodit.

Pro pozadí jsem si vytvořil obrázek široký 200 a vysoký 100 pixelů, který obsahuje dva stavy; vypadá takhle. Samotné tlačítko bude mít rozměr 200 × 50 px.

Teoretické řešení:

HTML
<a class="button" href="#">Button<span></span></a>

CSS
a.button {
display: block;
position: relative;
margin: 0; padding: 0;
width: 200px; height: 50px;
cursor: hand;
overflow: hidden;
}
a.button span {
display: block;
position: absolute; left: 0; top: 0; z-index: 1;
margin: 0; padding: 0;
width: 200px; height: 50px;
background: url('button.gif') left top no-repeat;
}
a.button:hover span {
background-position: 0 -50px;
}

Bohužel nefunguje v Internet Exploreru 5.x, ve verzi 6 chybuje. Takže jsem chvíli experimentoval a upravil styl do podoby funkční i v IE. Změna je vyznačena tučně.

Funkční řešení

CSS
a.button {
display: block;
position: relative;
margin: 0; padding: 0;
width: 200px; height: 50px;
cursor: hand;
overflow: hidden;
}
a.button span {
display: block;
position: absolute; left: 0; top: 0; z-index: 1;
margin: 0; padding: 0;
width: 200px; height: 50px;
background: url('button.gif') left top no-repeat;
}
a.button:hover, a.button:hover span {
background-position: 0 -50px;
}

Viz příklad 1. Funguje bezpečně v IE 5+, Firefoxu i Opeře na PC (jinde jsem netestoval).

Více tlačítek

V praxi je většinou potřeba udělat speciální tlačítko pro každý jednotlivý odkaz. Úprava stylu je pak velmi snadná, spočívá ve vytvoření nové třídy a přepsání předchozího pravidla o adrese obrázku na pozadí.

HTML
<a class="button" href="#">Button<span></span></a>
<a class="button button2" href="#">Button 2<span></span></a>
<a class="button button3" href="#">Button 3<span></span></a>

CSS
…
a.button2, a.button2 span {
background: url('button2.gif') left top no-repeat;
}
a.button3, a.button3 span {
background: url('button3.gif') left top no-repeat;
}
a.button:hover, a.button:hover span {
background-position: 0 -50px;
}

Aby styl pracoval správně i v Exploreru, je nutné, aby byla definice pro „button2“ a „button3“ ještě před stylem pro „:hover“ stav. Podívejte se na příklad 2.

Aktivní odkaz

Teď už není problém přidat do stylu styl pro aktivní odkaz, třeba takto.

HTML
…
<a class="button button3 current" href="#">Button 3<span></span></a>

CSS
…
a.button:hover, a.button:hover span, a.current, a.current span {
background-position: 0 -50px;

Viz příklad 3.

Vertikální menu

Kvůli tomu, že byl odkaz s třídou „button“ formátován jako blokový prvek, řadí se tlačítka automaticky pod sebe. Vertikální menu lze vytvořit velmi snadno, postačí nastavit odkaz jako plovoucí.

CSS
a.button {
display: block;
float: left;
position: relative;
margin: 0; padding: 0;
width: 200px; height: 50px;
cursor: hand;
overflow: hidden;
}

Viz příklad 4.

Stylopisy jsou až na jednu výjimku validní. Tou je definice „cursor: hand“ opravující nepříjemnost Exploreru 5.x, který odmítá zobrazit u tlačítka „pacičku“ a zároveň nerozumí standardní vlastnosti „cursor“ s hodnotou „pointer“. Notoričtí vyznavači validního webu nechť tuto část stylu smažou a smíří se s textovým kurzorem u tlačítka ve starých Explorerech.

Jestliže máte nějaký návrh na zlepšení, podělte se o něj prosím v komentářích. Pokud mi chcete jen vynadat nebo oznámit, že něco podobného znáte už dávno, nedělejte to. Praktický výsledek použití tohoto postupu je k vidění třeba na mém webu.