websta.pl

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:

Websta.pl

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.

Tagi: CSS, webdesign, XHTML