Nawigacja
Efekt RollOver
Napisane przez Gander
dnia 10 grudnia 2006 11:12 ·
4 komentarze ·
11858 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] |