Często w przypadku menu strony, bannerów czy przycisków potrzebujesz reakcji elementu po wskazaniu myszką. Najczęściej jest to zmiana tła lub koloru czcionki. Przy pomocy prostego triku można wykonać to bez użycia javascript w czystym CSS i XHTML.
Musisz tylko rozwiązać dwa podstawowe problemy. W końcu chcesz, żeby Google odczytało anchor linku (ewentualnie użytkownicy korzystający z przeglądarek tekstowych lub screenreader’ów). Drugi problem to, gdy użyjesz 2 plików graficznych w momencie wskazania elementu (hover / rollover) nastąpi wczytanie drugiego obrazka, co objawia się chwilowym jego zniknięciem.
Skoro już wiesz w czym problem, przejdźmy do działania. Rozwiązanie jest naprawdę proste.
Zacznijmy od XHTML będzie wyglądać tak (dlaczego dałem span dowiesz się poniżej):
<a class="link" href="#"><span>Websta.pl</span></a>
Teraz w Photoshopie przygotuj przycisk. Mój ma 100px na 40px.
![]()
Po najechaniu myszką będzie wyglądać tak (też 100px na 40px):
![]()
Połącz dwa obrazki w jeden (teraz mój ma 100px na 80px):

Teraz już tylko kilka linii w CSS i gotowe.
a.link { background: url(obrazek.jpg) no-repeat; display:block; height:40px; overflow:hidden; width:100px; } a.link:hover { background-position: 0px -40px; } a.link span { display:block; text-indent: -9999px; }
I to tyle. Poniżej działający przykład:
Jak to działa?
Zasadę działania przedstawia obrazek:

Element span został ukryty poprzez przesunięcie poza przycisk, dzięki temu przycisk będzie widoczny dla osób używających (sporej części) przeglądarek tekstowych i screenreaderów (no i dla googiela).
Sposób może nie jest odkrywczy, ale często spotykam takie tematy na forach, co oznacza, że nie każdy go zna.
Na koniec jeszcze link do ciekawych testów i kilku innych metod:
http://css-tricks.com/nine-techniques-for-css-image-replacement/
Tradycyjnie zapraszam do dyskusji.
Świetne, dzięki!
Świetny opis,
Dziękuję
Kolejny wynalazek, który chodzi także pod Explorerem – dzięki :)