Wiem, że temat jest stary, ale dodam coś jeszcze od siebie.
Niech Was czart broni przed używaniem rollovera - to jest po prostu
przestarzała metoda na podmianę obrazka.
Podczas odpowiadania na
problem z odsyłaczem, przypomniał mi się ten temat i odpowiedź Szujaka. Jego sposób jest o wiele lepszy od tego przedstawionego w temacie, ale nie jest do końca dobry.
Dlaczego? Jeśli najedzie się na obrazek, to dopiero wtedy zacznie wczytywać się ten, który jest zdefiniowany w
a:hover. Nie chcemy tego, prawda?
Dlatego lepiej zastosować inny sposób. Po prostu umieszczamy dwa obrazki w jednym pliku PNG (najlepiej, żeby obrazek miał stałą szerokość, tzn. mieściły się tam oba obrazki). Wtedy kod CSS wygląda nieco inaczej:
a {
display:block;
width:100px; // szerokość obrazka
height:38px; // wysokość obrazka
background: url(/images/obrazek.png) no-repeat 0 0;
text-indent:-30000px; // wyrzucenie anachora w kosmos
overflow:hidden; // gdyby coś miało 'wystawać', to nie pokazuj
}
a:hover {
background:url(/images/obrazek.png) no-repeat 0 -38px;
}
Magiczną liczbą jest tutaj liczba 38 - oznacza ona wysokość, w której w pliku
obrazek.png kończy się jeden obrazek, a zaczyna drugi. Należy tę liczbę 38 wraz z 100 podmienić na określone wartości dla naszego obrazka.
Efekt możecie sprawdzić
w stopce (logo Blipa) - przy wczytywaniu strony wczytywany jest jeden obrazek, co jest bardziej użyteczne i
zaoszczędza czas - wystarczy jedno żądanie do serwera, a nie dwa.
Tadam! ;-)
Ogólne dyskusje
