Trzy sposoby na rollover
Jacek | 2010-02-19 22:17:30
Rollover to efekt zmiany obrazka po najechaniu myszą.
Sposób 1: JavaScript
Czas i łącze
- Kod: 140 bajtów
- 2 obrazki (w przykładzie: 789 + 728 bajtów)
- 2 zapytania HTTP (ok. 1000 bajtów)
- Łącznie: 2637 bajtów
Zalety i wady
- Za: prosty kod
- Przeciw: konieczność włączenia JavaScript
- Przeciw: oczekiwanie na załadowanie obrazka po najechaniu (lub zastosowanie preloadera)
- Przeciw: dla każdego obrazka trzeba utworzyć osobne reguły
Kod
<a href="http://jacekk.info"> <img src="sun.png" alt="Słońce" onmouseover="this.src='sol.png'" onmouseout="this.src='sun.png'"> </a>
Przykład
Sposób 2: CSS (:hover)
Czas i łącze
- Kod: 200 bajtów
- 2 obrazki (w przykładzie: 789 + 728 bajtów)
- 2 zapytania HTTP (ok. 1000 bajtów)
- Łącznie: 2717 bajtów
Zalety i wady
- Za: prosty kod
- Za: działa nawet z wyłączonym JavaScriptem
- Za: można przenieść do osobnego arkusza stylów (mniej zapytań przy kolejnych odwiedzinach)
- Przeciw: oczekiwanie na załadowanie obrazka po najechaniu (lub zastosowanie preloadera)
- Przeciw: dla każdego obrazka trzeba utworzyć dwie osobne reguły
Kod
<style type="text/css">
.test {background:url(sun.png); display:block; width:50px; height:50px;}
.test:hover {background:url(sol.png);}
</style>
<a href="http://jacekk.info" class="test"></a>
Przykład
Sposób 3: CSS Sprites
Czas i łącze
- Kod: 220 bajtów
- 1 obrazek (w przykładzie: 1372 bajty)
- 1 zapytanie HTTP (ok. 500 bajtów)
- Łącznie: 2092 bajty
Zalety i wady
- Za: działa nawet z wyłączonym JavaScriptem
- Za: brak oczekiwania na załadowanie obrazka
- Za: można przenieść do osobnego arkusza stylów (mniej zapytań przy kolejnych odwiedzinach)
- Za: możliwość prostego zastosowania dla innych sprite'ów o identycznej wielkości (zmiana background-image)
Kod
<style type="text/css">
.test {background:url(sunsol.png) no-repeat; display:block; width:50px; height:50px;}
.test:hover {background-position: 0 -50px;}
</style>
<a href="http://jacekk.info" class="test2"></a>
Przykład
Jak to działa?
Jeden obrazek składający się z połączonych elementów (patrz niżej) zostaje ustawiony jako tło wybranego obiektu o ustalonych wymiarach (50x100 px):
Następnie wysokość obiektu jest zmniejszana (w przykładzie o połowę: ze 100px do 50px):
Następnie stylowana jest pseudoklasa :hover, która przesuwa tło 50 pikseli ponad element (część obrazka ponad obiektem będzie niewidoczna).
Kolor niebieski oznacza maksymalne (normalnie niewidoczne) pole zajmowane przez tło. Kolorem żółtym zostały oznaczone ramy obiektu, w którym obrazek jest "podmieniany".
© by Jacek Kowalski Sponsor: poszukiwany
Menu
