CSS Sprite - menu z jednego pliku

Patrząc na stronę internetową można zauważyć, że w dzisiejszych  czasach strony grafiką stoją. Grafika w formie różnych plików (png, jpg, gif) wypełniają stronę zwiększając jej atrakcyjność. Jednak im więcej grafik tym bardziej strona i serwer są przeciążone. Na przykładzie menu pokażemy jak zmienić kilka grafik w jedną. Służy do tego CSS Sprite.
KodHTML w nawigacji:

<nav>

<ul>

<li><a class="firma" href="">O firmie</a></li>

<li><a class="oferta" href="">Oferta</a></li>

<li><a class="przepisy" href="">Przepisy</a></li>

<li><a class="produkty" href="">Produkty</a></li>

<li><a class="kontakt" href="">Kontakt</a></li>

</ul>

</nav>

Kod CSS powyższe nawigacji:

nav ul li {display: inline;}

nav ul li a {color: #666; font-weight: bold; text-decoration: none; padding: 15px 0 12px 60px;}

nav ul li a.firma {background: url(img/nav_firma.png) no-repeat;}

nav ul li a.oferta {background: url(img/nav_oferta.png) no-repeat;}

nav ul li a.przepisy {background: url(img/nav_przepisy.png) no-repeat;}

nav ul li a.produkty {background: url(img/nav_produkty.png) no-repeat;}

nav ul li a.kontakt {background: url(img/nav_kontakt.png) no-repeat;}

Wynik działania kodu:

W powyższym przykładzie przy każdej pozycji menu jest wczytywana nowa grafika. Aby zamienić kilka grafik w jedną należy w programie graficznym połączyć je ze sobą. Nowy plik zapisujemy pod nazwą "nav.png".

Zmieniamy kod CSS:

nav ul li a.firma {background: url(img/nav.png) 0px 0px no-repeat;}

nav ul li a.oferta {background: url(img/nav.png) 0px -50px no-repeat;}

nav ul li a.przepisy {background: url(img/nav.png) 0px -100px no-repeat;}

nav ul li a.produkty {background: url(img/nav.png) 0px -150px no-repeat;}

nav ul li a.kontakt {background: url(img/nav.png) 0px -205px no-repeat;}

Należy zwrócić uwagę na to, że teraz wczytujemy tylko jeden plik (nav.jpg). W kodzie występują dwa parametry Xpx i Ypx. Pierwsza wartość pracuje po osi OX (góra dół), a druga wartość po osi OY (lewo prawo). W tym przypadku podnosimy plik nav.png do góry dlatego mamy ujemne wartości.

Teraz zmienimy akcje przycisków. Chcemy, żeby po najechaniu myszką na przycisk tekst zmienił kolor na pomarańczowy, a obrazek był w skali szarości. W programie graficznym dodajemy szare bloki poniżej kolorowych:

Kod dla akcji :hover wygląda następująco:

nav ul li a.firma:hover {background: url(img/nav.png) 0px -252px no-repeat;color: #ff6010;}

nav ul li a.oferta:hover {background: url(img/nav.png) 0px -302px no-repeat;color: #ff6010;}

nav ul li a.przepisy:hover {background: url(img/nav.png) 0px -352px no-repeat;color: #ff6010;}

nav ul li a.produkty:hover {background: url(img/nav.png) 0px -402px no-repeat;color: #ff6010;}

nav ul li a.kontakt:hover {background: url(img/nav.png) 0px -457px no-repeat;color: #ff6010;}

Powyższe zadanie było wykonywane na zajęciach "Aplikacje internetowe" na kierunku Technik informatyk.

e-aleksandra