Witam, chciałbym wam dzisiaj pokazać w krótki sposób jak zmienić grafikę po najechaniu na nią myszką. Efekt można zobaczyć na naszym forum w headerze na buttonach: Start, Blog itp.
Kod:
<a href="Adres www pod który ma przechodzić button gdy na niego klikniemy."><img src="Adres do zwykłej grafiki" onmouseover="this.src='Adres do grafiki, która wyświetla się po najechaniu myszką'" onmouseout="this.src='Adres do zwykłej grafiki'"></a>
Nie można, a trzeba!
on w kodzie tylko śmieci. i JS nie jest od prezentacji, a warstwy logicznej. CSS to prezentacja.
i warto wykorzystać CSS sprites, bo inaczej może się grafika lagnąć
Można zrobić też z jednym obrazkiem, ustawiamy tylko pozycję wyświetlania. Plus jest tak, że wczyta się od razu cały obrazek i nie będzie ewentualnego przeskoku w hoverze na wczytanie drugiego obrazka.
ja sobie nie wyobrażam działania z dwoma obrazkami chyba, że zastosujemy poprawny preload, tzn z wykorzystaniem :after z CSS 2.1.
osobiście spotkałem sie także z techniką SVG sprites
Jeżeli chodzi o tło to tylko i wyłącznie z jednym obrazkiem w innym wypadku dopiero po najechaniu na przycisk będzie wczytywany ten drugi obrazek. Tak mi się wydaje
Można jeszcze użyć CSS 3, czyli tranzition: poprzez to można zrobić animację jakie znamy w JS, Jquery, lecz dużo łatwiej i ładnie to wygląda . Ta funkcja działa od zmiany kolorów diva po przesuwanie, zmianę rozmiaru.
