[css] Zmiana obrazka po najechaniu na niego


(Radmistrz2) #1

Witam. Jako link mam obrazek:

[/code]

Co wpisac w css w .link:hover aby po najechaniu na ten obrazek zmieniał się na inny?


(Gucman007) #2

Nie wstawiaj obrazka wewnątrz odnośnika, tylko ustaw dla niego tło w CSS (za pomocą background)

PRZYKŁAD:

CSS:

a.index {

  width: 175px;

  height: 65px;

  border: 0px;

  background: url(images/index_06.gif) no-repeat;

}

xHTML:

jakiś tekst

[/code]




Wtedy po najeździe myszką dajesz inne tło dla odnośnika w CSS:

[code]a.index:hover { width: 175px; height: 65px; border: 0px; background: url(images/inny_obrazek.gif) no-repeat; }

btw. Pamiętaj, że hover w IE działa jedynie dla linków. Dlatego proponuję Ci to rozwiązanie, bo gdybyś nadał hover dla obrazka a nie dla linku, to nie działało by to po Internet Explorerem. Jak widzisz microsoft lubi robić wszystko na odwrót. Z niecierpliwością czekamy na IE8, który podobno zdaje Acid2, ale co z tego, jeśli i tak mało kto zaktualizuje do najnowszej wersji... ehh

//edit:

poza tym, przeglądając dalej forum, natknąłem się na podobny topic jeszcze na tej samej stronie. Może warto było poszukać, zanim zadałeś pytanie.

viewtopic.php?f=18&t=212051&start=0&st=0&sk=t&sd=a


(Wojciech R) #3

Można to też zrobić odpowiednim zdarzeniem w js ale moglo by sie rozjeżdrzać


(Gucman007) #4

Tylko po co używać JS skoro nie każda przeglądarka obsługuje? Tutaj chodzi również o dostępność