W artykule opiszę uniwersalną metodę wykonywania przycisków reagujących na najechanie myszką. Opisane rozwiązanie bazuje wyłącznie na CSS, dzięki czemu dostajemy maksymalnie zwięzły kod XHTML. Dodatkowa korzyść polega na tym, że etykieta przycisku jest tekstem w XHTML. Tekst taki nie tylko podlega skalowaniu, ale także łatwo go wymienić.
Menu nowoczesnych witryn WWW jest zazwyczaj wykonywane w postaci listy wypunktowanej. Kolejne pozycje menu są elementami listy:
<ul> <li><a href="lorem.html">loerm</a></li> <li><a href="ipsum.html">ipsum</a></li> <li><a href="dolor.html">dolor</a></li> </ul>
Rozwiązanie takie ma — oprócz swojej elegancji — co najmniej dwie zalety:
Druga z zalet jest istotna dla przeglądarek czytających zawartość witryn.
Zadaniem, jakiemu jest poświęcony artykuł, jest ozdobienie tak wykonanego menu dynamicznymi przyciskami, reagującymi na wskaźnik myszki. Zadanie to sprowadza się do rozwiązania w CSS dwóch problemów:
Najpierw przystępujemy do wykonania witryny zawierającej jedno hiperłącze. Oto cały kod XHTML przykładu:
<div> <a href="index.html">Lorem ipsum...</a> </div>
CSS udostępnia jedną metodę reakcji na wskaźnik myszki: pseudoselektor hover elementu a. Zmianę właściwości hiperłącza realizujemy:
a:hover {
...
}
Zazwyczaj dokonywana jest zmiana koloru czcionki oraz koloru tła i ewentualnie dodawane jest obramowanie lub podkreślenie.
W celu naciśnięcia przycisku graficznego będziemy w pseudoselektorze wymieniali obraz tła:
a:hover {
background : url('on.png');
}
Jeśli chcemy wymienić obrazek tła hiperłącza a, to przede wszystkim należy zagwarantować jego odpowiednie pozycjonowanie. Pierwszym etapem jest zmiana hiperłącza z elementu tekstowego na blokowy:
a {
display : block;
}
Teraz mamy do dyspozycji właściwości width, height, padding, margin, border, left, top oraz position sterujące położeniem i wielkością elementu.
Idea działania przycisku jest bardzo prosta. Element div będzie posiadał tło widoczne na rysunku 1. Hiperłącze natomiast nie posiada tła. Otrzyma je dopiero po najechaniu myszką.
Zatem: w stanie, gdy hiperłącze nie jest wskazane myszką, na ekranie widoczny jest cały obraz tła elementu div (hiperłącze nie posiada tła). Po wskazaniu hiperłącza myszką, pojawia się tło hiperłącza, które przysłania fragment tła elementu div.
Zauważ, że hiperłącze nie pokrywa całego elementu div. Jedynie jego fragment o wymiarach 260×150. Położenie hiperłącza jest zaznaczone na rysunku 1 białym rozjaśnieniem.
Rysunek 1. Tło elementu div
Rysunek 2. Tło hiperłącza wyświetlane po najechaniu myszką
Do rozwiązania powyższego zadania musisz najpierw ustalić wymiary obrazów. W omawianym przykładzie:
Ponadto hiperłącze rozpoczyna się w punkcie o współrzędnych 180×210 w elemencie div.
Znając wymiary, przystępujemy do opisania stylów. Rozwiązanie ma być uniwersalne, zatem najpierw ustalamy dowolne położenie elementu div:
body {
margin-top : 27px;
margin-left : 258px;
}
Teraz ustalamy wymiary i obraz tła elementu div. Zwróć uwagę, na wpis position. To dzięki niemu, możliwe będzie dowolne przesuwanie elementu div:
div {
background : url('rollover-css-off.png') no-repeat;
width : 800px;
height : 600px;
padding : 0px;
margin : 0px;
border : none;
position : relative;
}
Następnie pozycjonujemy hiperłącze:
a {
display : block;
position : absolute;
padding : 0px;
margin : 0px;
border : none;
/*
* lewy górny narożnik rollovera
* w obrazie
*/
left : 180px;
top : 210px;
/*
* wymiar rollovera
*/
width : 260px;
height : 0px;
/*
* środkowanie napisu w poziomie
*/
text-align : center;
/*
* środkowanie napisu w pionie
*/
line-height : 0.2ex;
/*
* połowa wysokości rollovera
*
*/
padding-top : 75px;
padding-bottom : 75px;
}
Dzięki użyciu właściwości position, położenie hiperłącza jest wyznaczane względem lewego górnego narożnika elementu div. Jest to bardzo wygodne, gdyż pozwala na przesuwanie elementu div.
Powyższe rozwiązanie jest tak przygotowane, by tekst zawarty w hiperłączu był wyśrodkowany wewnątrz przycisku.
Na zakończenie pozostała wymiana obrazu tła po wskazaniu odsyłacza kursorem myszki:
a:hover {
background : url('rollover-css-on.png') no-repeat;
}
W celu umieszczenia tekstu napisu w środku przycisku należy podjąć dwa kroki. Wyśrodkowanie poziome jest bardzo łatwe. Wymaga jedynie podania wpisu:
text-align : center;
Natomiast środkowanie pionowe stwarza więcej problemów. Głównie dlatego, że nie możemy użyć atrybutu vertical-align (atrybut ten jest przeznaczony wyłącznie do elementów wierszowych — ang. inline).
Wyśrodkowanie poziome realizujemy ustalając zerową wysokość elementu:
height : 0px;
po czym zwiększając wyrównanie pionowe do pełnej wysokości pudełka. Jeśli pudełko ma wysokość 150 pikseli, to podajemy wpisy:
padding-top : 75px; padding-bottom : 75px;
Na zakończenie ustalamy wysokość wiersza bliską 0:
line-height : 0.2ex;
Jeśli użyjesz wartości 0, to Opera błędnie zawyży położenie etykiet. Podana wartość sprawdza się we wszystkich nowoczesnych przeglądarkach.
Gdy gotowe jest pojedyncze hiperłącze umieszczone w elemencie div, możemy przystąpić do pracy nad listą ul. W pierwszym kroku wykonujemy listę dwuelementową:
<ul> <li id="o1"><a href="lorem.html">Lorem</a></li> <li id="o2"><a href="ipsum.html">Ipsum</a></li> </ul>
Oczywiście z racji na fakt, że każdy przycisk będzie posiadał unikalne tło, musimy posłużyć się identyfikatorami opcji menu.
W rozwiązaniu zadania najpierw przygotowujemy obraz tła. Ma on wymiary 800×600 pikseli i jest przedstawiony na rysunku 3. Obraz ten umieścimy w tle elementu ul.
Następnie przygotowujemy obrazy opcji. Pierwsza opcja będzie miała wymiary 260×150 i rozpocznie się w punkcie o współrzędnych 180×210. Opcja ta — po wskazaniu kursorem myszki — będzie wyglądała tak, jak na rysunku 4.
Druga z opcji ma wymiary 200×360. Jej położenie rozpoczyna się w punkcie 580×90. Obraz, jaki ma być widoczny po najechaniu kursorem myszki jest widoczny na rysunku 5.
Rysunek 3. Tło elementu ul
Rysunek 4. Tło pierwszej opcji
Rysunek 5. Tło drugiej opcji
Tym razem obraz tła dołączamy do elementu ul:
ul {
background : url('ul-tlo.png') no-repeat;
...
}
Natomiast obraz tła opcji menu pozycjonujemy wykorzystując selektory potomne i identyfikatory opcji:
#o1 a {
...
left : 180px;
top : 210px;
width : 260px;
height : 0px;
...
}
Za wymianę obrazu pierwszej z opcji odpowiada selektor potomny #o1 a:hover:
#o1 a:hover {
background : url('li-1-on.png') no-repeat;
}
W podobny sposób należy przygotować style opisujące drugą z opcji.
Ostatni z przykładów rozwiązuje problem postawiony na początku. Menu witryny, wykonane w oparciu o listę ul ozdabiamy przyciskami. Założenia są następujące:
Rysunki 6, 7 oraz 8 przedstawiają wynikową witrynę.
Podany przykład wykorzystuje pięć obrazów przedstawionych na rysunkach 9, 10, 11, 12 oraz 13. Pierwszy obraz umieszczony jest w tle elementu ul, pozostałe stanowią tło czterech opcji.
Rysunek 6. Przykład trzeci: wszystkie opcje są nieaktywne
Rysunek 7. Kursor myszki znajduje się nad opcją Lorem
Rysunek 8. Kursor myszki znajduje się nad opcją Ipsum
Rysunek 9. Tło listy ul
Rysunek 10. Tło pierwszej opcji (po najechaniu myszką)
Rysunek 11. Tło drugiej opcji (po najechaniu myszką)
Rysunek 12. Tło trzeciej opcji (po najechaniu myszką)
Rysunek 13. Tło czwartej opcji (po najechaniu myszką)
Jedną z zalet podanego rozwiązania jest to, że tekst etykiet może być skalowany. Wykonanie operacji Widok → Rozmiar tekstu → Zwiększ w przeglądarce Firefox (skrót klawiszowy: Ctrl+) spowoduje zwiększenie rozmiaru tekstu. Każdy z napisów pozostanie na swoim miejscu (tj. będzie wyśrodkowany wewnątrz przycisku). Rysunek 14 przedstawia witrynę z powiększonym kilkukrotnie tekstem etykiet przycisków.
Rysunek 14. Trzeci przykład zwiększeniu rozmiaru tekstu
Druga zaletą jest łatwość wymiany tekstu witryny. W celu zmiany podpisu opcji z Lorem na One, two, three wystarczy kod XHTML:
<li><a href="lorem.html">Lorem</a></li>
wymienić na:
<li><a href="one.html">One, two three</a></li>
Podane rozwiązanie przetestowałem w przeglądarkach: IE 6, IE 7, FF 1.5, FF 2.0, Opera 7.54, Netscape 8.
Co ciekawe, przygotowanie rozwiązania wykorzystującego tabelki wymagałoby pokrojenia obrazu na ... 65 kawałków, co ilustruje rysunek 15.
Oczywiście opisane rozwiązanie możemy wzbogacić o skrypt JavaScript pobierający wszystkie obrazki tła podczas pierwszego wejścia na stronę. Jedynym aspektem wstępnego pobierania dostępnym w JS, a niedostępnym w CSS, jest to, że nie możemy zablokować działania menu (tj. wymiany obrazków), aż do momentu, gdy wszystkie obrazy tła są pobrane.
Rysunek 15. Tabelka i 65 obrazów
| lp. | Przykład |
|---|---|
| 1. | Elementy: div, a |
| 2. | Menu: ul z dwoma opcjami li |
| 3. | Menu: ul z czterema opcjami li |
| 4. | Tabelka i 65 obrazków |
| 5. | Wstępne pobieranie (preload) obrazów tła |
Tabela 1. Przykłady do pobrania
