Jednoduchý preload obrázkového menu

Tomáš Gluchman  /  26. 04. 2006, 00:00

Určite sa aspoň raz v živote webdesignéra vyskytne potreba použiť namiesto klasickej textovej položky menu položku obrázkovú. Alebo aspoň obrázok ako jej podklad. Na tom nie je zatiaľ nič hrozného, riešenie je jednoduché.

Situácia sa môže trochu skomplikovať, ak sa má položke prideliť tzv. hover efekt (teda udalosť, ktorá nastane pri presunutí kurzora myši ponad nejaký objekt) – zmena obrázku.

Vezmime si za príklad takýto HTML kód (pre rozsiahlosť bežných HTML zdrojákov ho prirodzene neuvádzam v plnej kráse, zameriame sa len na tento výsek):

<ul>
    <li><a href="#">Položka 1</a></li>
    <li><a href="#">Položka 2</a></li>
    <li><a href="#">Položka 3</a></li>
    <li><a href="#">Položka 4</a></li>
</ul>

Samozrejme, že bude nasledovať naštýlovanie tohto kódu. Predpokladám, že takmer každý si dokáže napísať štýl pre jednotlivé prvky stránky bez problémov, preto prejdem rovno k veci. Jedno z možných riešení je také, že naraz pri načítavaní stránky načítame aj požadované obrázky tvoriace pozadie našich položiek. V tomto prípade som použil obrázky obr1.jpg až obr4.jpg pre obrázky v „základnom“ stave, teda, keď sa nad nimi nenachádza kurzor. Pre zvýraznené položky som použil obrázky obr1-hover.jpg až obr4-hover.jpg. Tie sa zobrazia návštevníkovi, pri presunutí kurzora myši ponad položku menu, ktorý už ale nemusí čakať, kým sa obrázok načíta (ako je to zvykom u mnohých súčasných kvázi-moderných stránok). Pri pomalom pripojení maximálne obrázky preblesknú, čo občas môže vyzerať celkom efektne.

Samotná zmena obrázka sa dá vykonať tak, že pre element li nastavíme ako pozadie hover obrázok a pre element a zase obrázok, ktorý je zobrazený vo východzom stave. Potom už len pseudotriedou :hover obrázok pozadia odkazu skryjeme (spriehľadníme pozadie) a zobrazí sa nám už vopred načítaný hover obrázok. Tento princíp funguje ako vo Firefoxe, Opere, tak aj v IE 6 a 5.x (v kóde príkladu je použitá conditional comment pre IE verzie nižšej ako 6, ktorá ale nemá žiadny vplyv na funkčnosť tu vysvetleného princípu).

CSS kód bude vyzerať v skratke asi takto:

li#obr1 {background: url(preload/obr1-hover.jpg);}
li#obr1 a {background: url(preload/obr1.jpg);}
li#obr1 a:hover {background: transparent;}

Samozrejme, dalo by sa to riešiť aj inak (napr. prehodením obrázkov alebo úplne iným princípom), tento postup ma ale prednedávnom napadol a zdá sa mi celkom elegantný a jednoduchý :)

Celý kód aj s praktickou ukážkou je možné si pozrieť na http://blog.gluchman­.sk/

Neprehliadnite: