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/
