Projektowanie stron WWW od podszewki
Losowy artykuł: Bugi w NetBeans

Artykuły na każdy temat

[CSS] Efekt rollover

Dodano 20.08.2010r. o 15:22
Efekt rollover jest niczym innym jak zmianą obrazka bez przeładowania strony. Kiedyś takie efekty można było uzyskać dzięki zdarzeniom z JavaScript (onmouseover i onmouseout). Teraz wystarczy chwila pracy z obrazkiem i odpowiedni kod CSS.

Aby można było korzystać z efektu rollover musimy odpowiednio przygotować grafikę. Przykładowa grafika powinna wyglądać tak:
efekt-rollover.jpg
Kierunek nie ma znaczenia gdyż jest to zależne od właściwości background-position.

Przykładowy kod CSS powinien wyglądać tak:
Kod:
a#avatar { width: 100px; height: 100px; display: block; background: url('images/efekt-rollover.jpg') no-repeat; }
a#avatar:hover { background-position: 0 -100px; }
natomiast kod HTML w ten sposób:
Kod:
<a href="http://www.capaciouscore.pl/" id="avatar"></a>
Przykład online można zobaczyć na podstronie Efekt rollover w CSS.

Komentarze

Publikowane komentarze są prywatnymi opiniami użytkowników serwisu. Serwis nie ponosi odpowiedzialności za treść opinii. W trosce o zachowanie poziomu dyskusji wszystkie komentarze podlegają akceptacji przed ich publikacją dlatego proszę cierpliwie czekać aż komentarz zostanie opublikowany.

CapaciousCore

Dodano 23.11.2010r. o 18:17
@Cztery_7 odnośnie efektu rollover to jest kilka ciekawych stron:
http://riddle.jogger.pl/2005/08/25/efekt-rollover-w-css/,
http://riddle.jogger.pl/2006/06/08/jeszcze-lepszy-efekt-rollover-w-css/,
http://csshover.pl/css/csshover/.
Była taka fajna ale została zainfekowana jakimś syfem i potem autor ją usuną. Ogólnie radziłbym szukać porad na zagranicznych serwisach Wink

Cztery_7

Dodano 23.11.2010r. o 17:13
Zajebiście stary ! Swietnie, prosto i efektywnie. Po raz kolejny trzeba najpierw przewalic pol tony stron zeby w koncu znalezc cos tak dobrego jak ten artykuł ... Pozdro ;)

Dodaj komentarz

Zostaw komentarz jeżeli możesz! Nie bądź przysłowiowym botem! Nie bądź obojętny! Ciebie to nic nie kosztuje, a mi sprawi uśmiech na twarzy.
Zezwolono używać: BBCode
Zabroniono używać:
znaczników HTML

(Wymagany)

(Wymagany, niepublikowany)

(Nie wymagana)

Token:

Obrazek dla bota

(Przepisz tylko cyfry!)

(Wymagana)