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í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.

Komentáře (9)

  • Pixyho řešení jsem zaregistroval poprvé, používal jsem vždycky jiné. Zajímalo by mě, jak je to s prázným span tagem … můj HTML validator Tidy (rozšíření firefoxu) říká, že by to tak být nemělo.

  • Používám pouze

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

    a všude mi to funguje (bez definice obrázku na pozadí pro a). Jinak v kódu příkladu je něco jiného než je v ukázce kódu ;)

  • Jinak v kódu příkladu je… jde o příklad 1, omlouvám se za dva posty :-/ Konrétně ten druhý hover není a.button span:hover, ale a.button:hover span.

  • Zipper> Zápisy:
    a.button:hover span
    a.button span:hover
    by vlastně čistě teoreticky měly mít stejný efekt.

    Díky za upozornění na chybu, sladil jsem kódy ukázek a příkladů na verzi a.button:hover span, kterou uvádíš ty — je to tak lepší.

    S definicí obrázku pro „a“ máš pravdu, i bez ní to funguje (teď přemýšlím, proč jsem ji tam vlastně dal, takže to mažu). Ale pokud není definováno a.button:hover, nefungují obrázky v IE 5. V IE 6 se mi odmítalo pozadí vrátit do výchozí pozice, proto tuto část považuji za nutnou. Díky.

  • Jen tak orientačně. Jsem si jist, že užívání 1 obrázku obsahujícího 2 různé „podobrázky“ má smysl zejména v tom, že jeho velikost je menší než velikost těchto 2 podobrázků, avšak separovaných každý do 1 souboru.

    Máte někdo ponětí, k jakému ušetření (a jestli vůbec k nějakému) dojde?

  • To Hondrej: Význam je hlavně v problikávání (resp. opožděném vykreslování) obrázků po najetí myší na ještě nenačtený obrázek. V případě Pixyho řešení se načte jediný obrázek, který obsahuje všechny stavy. Při klasickém řešení se samostatnými obrázky se načtou zobrazené obrázky a obrázky akcí (hover) se načítají až při najetí myší. To způsobí, že se stávající obrázek vymže a do načtení dalšího je na pozici jen prázdný čtyřúhelník.

  • No lze to jeste zmensit vynechanim left a top, to jsou default hodnoty :-) a ty uvozovky jsou taky zbytecne, protoze se uvadi vzdy URL resp. URI obrazku ;-]

  • Prosím o návrh řešení problému

    udělal jsem dvě tlačítka a každé je v jiném zobrazení stejného divu oba obrázky mají však rozdílnou výšku.

    při použití posunu pozadí přes Mozilla FF, Opera 9.0, Netscape 8.02 vše funguje na příkazy

    a.ikona
    {

    background-image: url(../ico/ikona1.gif);
    background-repeat: no-repeat;
    background-position: bottom;
    }

    a.ikona:hover
    {
    background-position: top;
    }

    ale v IE 6.0+ mi to dělá to, že při hover zobrazuje pozadí buttonu správně ale při běžném stavu zobrazuje pozadí butonu jakoby bylo dáno na střed divu

Píše Martin T. Pecina, knižní grafik, autor publikace Knihy a typografie. Portfolio: book-design.eu

Archivy

Rubriky