Efekt, preload obrázkov v CSS

Neviem ako by som to mal nazvať tento efekt. Ani sám neviem prečo sa práve to volá preload obrázkov. Poďme rovno k veci. Nie každý bude rozumieť tejto tématike, ale predpokladám, že to bude zaujímať iba tých, ktorí sa tomu venujú. Preto je tento článok písaný viac menej odborne.

Určite sa Vám naskytla možnosť vidieť ako niektoré obrázky vložené do webovej stránky technológiou CSS menia svoj stav po ukázaní kurzorom na obrázok, tzv. hover (CSS vývojári a kóderi by mali vedieť o čom hovorím).

Problém často nastáva v tom, že u zmeny niektorého obrázku vzniká prebliknutie, ktoré trvá pokiaľ sa daný obrázok “nenačíta” a preto si môžete myslieť, že nastala chyba. Upokojme sa, dá sa to vyriešiť. Ako?

Čo ak zvolím jednoduchú možnosť. Akú? No obrázok sa mi natiahne samostatne celý na začiatku a bude viditeľná iba jeho polovica a jeho hover stav sa bude meniť spôsobom, že sa obrázok po ukázaní kurzorom posunie tak, aby sa zobrazila iba tá druhá polovica obrázku, ktorú sme nevideli. Ukážeme si to na nasledovnom príklade.

Máme jednoduchý obrázok. Vložíme ho cez CSS do web stránky a vyhradíme priestor tak, aby sa nám zobrazila iba modrá časť. Chceme aby sa po prechode myškou po obrázku :hover zobrazila iba čierna časť obrázku.

Obrázok vložíte do webovej stránky cez DIV do BODY dokumentu napríklad takto:

Potom si prepojíte webovú stránku externým CSS súborom (kód vložíte do hlavičky HEAD):

Následne vložíte kód do externého CSS súboru a definujete odkaz k danému obrázku v parametri background a taktiež definujete polovičné height (celý obrázok má 100px), pretože chceme aby sa zobrazila iba polovica obrázku. Vykonáte to nasledovane:

Následne pridáte do CSS súboru aj hover stav obrázku do ktorého už nedefinujete rozmery zobrazovaného obrázku, ale vytvoríte jeho následný posun po ukázaní myškou. Keďže potrebujeme posun smerom nadol, všimneme si parameter -50px. Je to presný posun dole o 50 px. To spôsobí zobrazenie spodnej časti obrázka, teda tej čiernej.

Čo sme chceli dosiahnuť, to sa nám aj podarilo. Rôznou kombináciou sa dá ešte vytvoriť odkaz, alebo niečo iné, ale to teraz rozoberať nebudeme. Je oveľa ofektívnejšie vytvoriť samotný jeden obrázok kde sa zmení len jeho zobrazovacia plocha pri normálnom a hover stave. Prečo? Jednak šetríme kódom a jednak sa zbavíme úplne zbytočného preblikávania pri zmene stavu. Ďakujem za slovo a pevne verím, že to budete využívať.