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:
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.
Dodaj komentarz
Zezwolono używać:
BBCode
Zabroniono używać:
znaczników HTML
CapaciousCore
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