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 :)
witam jak połączyć te odnośniki pod sobą żeby nie było odstępu
Witam….
Mam pewne pytanie związane z tym sposobem.
Otóż mam takich obrazków pięć, ułożone w jednej linii na dole strony.
Wszystkie są zdefiniowane jako klasa “partnerzy”. W CSS odpowiednio tak samo. Nie są traktowane osobno (nie wiem czy się jasno wyrażam. Czy aby mieć taki efekt, muszę ustanowić siedem osobnych “klas” dla każdego obrazka i w html i CSS (odrębne obrazki, url)? Czy da się to jakoś pożenić?
Raczej będziesz musiał dać każdemu osobne id lub class.
Natomiast jak chodzi o “żenienie” to po części się właśnie tak robi. Łączy się przyciski w jeden plik graficzny i manipuluje pozycją tła. Wpisz w google “CSS Sprites” i zobaczysz o co chodzi ;)
Dzięki wielkie :)
Wspaniale działa, dziękuję!
a co z IE??? Nie dziala!!!
Tak? W jakim IE? U mnie działa w każdym.
Mi rozwala stronę :(
Recommended Websites…
[...]below you’ll find the link to some sites that we think you should visit[...]…
… [Trackback]…
[...] Read More here: websta.pl/szybkie-triki/szybkitrik-obrazek-z-efektem-hover-rollover-w-css [...]…