Nawigacja
Efekt RollOver
Napisane przez Gander
dnia 10 grudnia 2006 11:12 ·
4 komentarze ·
11436 czytań ·
· 
· 
Streszczenie:
Czym jest efekt RollOver? Jest to podmiana obrazka na inny, gdy przesunie się nad niego kursor myszy. W niniejszym artykule przedstawię kod i krótkie wyjaśnienie zasady działania efektu RollOver z wykorzystaniem JavaScript oraz CSS.
Czym jest efekt RollOver? Jest to podmiana obrazka na inny, gdy przesunie się nad niego kursor myszy.
W niniejszym artykule przedstawię kod i krótkie wyjaśnienie zasady działania efektu RollOver z wykorzystaniem JavaScript oraz CSS.
| JavaScript | ||
  |
→ | |
Jak widać z powyższego przykładu, do efektu RollOver z wykorzystaniem JavaScript potrzeba dwóch obrazków. Poniżej zamieszczam kod który użyłem w przykładzie:
<a href='#'><img src='obrazek1.png' onMouseOver='this.src="obrazek2.png"' onMouseOut='this.src="obrazek1.png"'></a>
Zdarzenia ruchu kursora nad obrazkiem są rejestrowane przez polecenia onMouseOver (kursor przesunięty nad obrazek) i onMouseOut (kursor przesunięty znad obrazka).
W obu przypadkach wywoływane jest polecenie this.src='nowy_adres' co oznacza że adres obecnego obiektu (obrazka) zostaje zmieniany na nowy_adres.
Jak to działa? To proste. Po wczytaniu strony widoczny jest obrazek1.png (jaśniejszy).
Po przesunięciu kursora myszy nad obrazek wykonuje się polecenie JavaScript i adres zostaje zmieniony na obrazek2.png (ciemniejszy).
Jeśli zabierzemy kursor znad obrazka, wykona się drugie polecenie i zostanie przywrócony pierwotny rysunek (jaśniejszy).
| CSS | ||
 |
→ | |
Jak widać z powyższego przykładu, do efektu RollOver z wykorzystaniem CSS potrzeba tylko jednego obrazka, ale podwójnego. Poniżej zamieszczam kod który użyłem w przykładzie:
a.RollOver { width:50px; display:block; overflow:hidden; }
a.RollOver:hover { zoom:1; display:block; }
a.RollOver img { border:0; margin:0; height:50px; display:block; }
a.RollOver:hover img { margin-left:-50px; }
<a href='#' class='RollOver'><img src='obrazek.png' alt=''></a>
Efekt RollOver wykonany został tutaj poprzez wykorzystanie selektora pseudoklasy :hover, który umożliwia dynamicznie zmieniać wygląd linku w zależności od jego stanu.
Co ma link do efektu? Bardzo dużo, gdyż obrazek w tym przypadku jest potomkiem linku.
Można dzięki tej zależności modelować wygląd i zachowanie obrazka.
Jak to działa? Bardzo ładnie :) W stanie spoczynku, dzięki powyższym ustawieniom widoczna jest lewa połowa obrazka, reszta zaś jest ukrywana (overflow:hidden). Po przesunięciu kursora myszki nad link, lewy margines znajdującego się w nim obrazka zostaje przesunięty w lewo o 50px (margin-left:-50px) dzięki czemu widać prawą część obrazka. Po usunięciu kursora znad linku, wszystko wraca do pierwotnego stanu.
Efekt RollOver nawala w Internet Explorerze, gdy: zabraknie zapisu a.RollOver:hover { zoom:1; display:block; }, lub doda się wysokość w a.RollOver { width:50px; display:block; overflow:hidden; }.
Jak to działa? Bardzo ładnie :) W stanie spoczynku, dzięki powyższym ustawieniom widoczna jest lewa połowa obrazka, reszta zaś jest ukrywana (overflow:hidden). Po przesunięciu kursora myszki nad link, lewy margines znajdującego się w nim obrazka zostaje przesunięty w lewo o 50px (margin-left:-50px) dzięki czemu widać prawą część obrazka. Po usunięciu kursora znad linku, wszystko wraca do pierwotnego stanu.
Efekt RollOver nawala w Internet Explorerze, gdy: zabraknie zapisu a.RollOver:hover { zoom:1; display:block; }, lub doda się wysokość w a.RollOver { width:50px; display:block; overflow:hidden; }.
Zachęcam do lektury! Tu jest wszystko lepiej napisane niż ja umiałbym wytłumaczyć :)
Kurs HTML - strona WWW za darmo
Riddle's Jogger - Efekt rollover w CSS
Riddle's Jogger - Jeszcze lepszy efekt rollover w CSS
Kurs HTML - strona WWW za darmo
Riddle's Jogger - Efekt rollover w CSS
Riddle's Jogger - Jeszcze lepszy efekt rollover w CSS
Podane przykłady zostały przetestowane na poniższych przeglądarkach:
Internet Explorer 6.0, Mozilla 1.7, Mozilla Firefox 1.5 i 2.0, Netscape Browser 8.1, Opera 9.0, Konqueror 3.5
Internet Explorer 6.0, Mozilla 1.7, Mozilla Firefox 1.5 i 2.0, Netscape Browser 8.1, Opera 9.0, Konqueror 3.5
Komentarze
#1 |
Pieka
dnia 11 grudnia 2006 23:16
#2 |
Leo
dnia 13 grudnia 2006 23:28
#3 |
ultralowbird
dnia 11 marca 2007 10:18
#4 |
Kinimodek
dnia 06 listopada 2008 06:36
Dodaj komentarz
Zaloguj się, aby móc dodać komentarz.
Oceny
Tylko zarejestrowani użytkownicy mogą oceniać zawartość strony
Zaloguj się lub zarejestruj, żeby móc zagłosować.
Zaloguj się lub zarejestruj, żeby móc zagłosować.
| Świetne! |  |
100% | [5 głosów] |
| Bardzo dobre | |
0% | [0 głosów] |
| Dobre | |
0% | [0 głosów] |
| Średnie | |
0% | [0 głosów] |
| Słabe | |
0% | [0 głosów] |