ForumCała strona

Nawigacja

Aktualnie online

Gości online: 1

Użytkowników online: 0

Łącznie użytkowników: 25,386
Najnowszy użytkownik: Hisfatt

Logowanie

Nazwa użytkownika

Hasło



Zarejestruj się

Odzyskaj hasło

Shoutbox

Musisz zalogować się, aby móc dodać wiadomość.

Zbigniew@
01.04.2024 12:28:45
Wszystkiego najlepszego z okazji świąt.

JazOOn
28.02.2024 19:25:31
ja zostałem przy fusionie ale nazywa się 360. Projektowanie i druk 3d...

MajsterBieda
25.02.2024 00:12:42
Ponad 20 lat .... tosz to sioook panie.... Grin

JazOOn
24.02.2024 20:32:31
a już na pewno mamuty

JazOOn
24.02.2024 20:31:59
Albo dinozaury

Pobierz nową wersję
Pobierz podręcznik
Zobacz inne oficjalne Supporty
Statystyki supportu
PHP-Fuson PL na Facebooku

RSS

Polecamy hosting SferaHost.pl

Nawigacja

Efekt RollOver

Napisane przez Gander dnia 10 grudnia 2006 11:12 · 4 komentarze · 11432 czytań · Drukuj · Facebook · Wykop

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; }.
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
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

Komentarze

#1 | Pieka dnia 11 grudnia 2006 23:16
Brawo!!! Cool
Zaczynamy byc coraz bardziej profesjonalni Smile
#2 | Leo dnia 13 grudnia 2006 23:28
Super !!!
Zawsze się zastanawiałem dlaczego niektórzy w swoich zestwach z templami dawali podwójne obrazki, teraz wiem że były pod css Smile
#3 | ultralowbird dnia 11 marca 2007 10:18
póki co najlepiej opisany problem jaki znalazlem na tym forum - n1 :]
#4 | Kinimodek dnia 06 listopada 2008 06:36
Artykuł doborowy Wink

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ć.

Świetne! Świetne! 100% [5 głosów]
Bardzo dobre Bardzo dobre 0% [0 głosów]
Dobre Dobre 0% [0 głosów]
Średnie Średnie 0% [0 głosów]
Słabe Słabe 0% [0 głosów]
Created by Arox Copyright (C) 2004
Copyright (C) 2004 - 2018 Ekipa PHP-Fusion.pl