Efekt rollover w oparciu o elementy div i style CSS

Animowane menu strony, którego opcje reagują na wskaźnik myszki, jest bardzo atrakcyjne. W artykule przedstawimy w jaki sposób wykonać takie menu, gdy dysponujemy obrazem narysowanym w GIMP-ie. Kod HTML menu będzie wykorzystywać elementy div oraz arkusze stylów.

Ilustracje, od których rozpoczynamy pracę

Do efektu dynamicznego menu, nazywanego rollover, potrzebne są dwa obrazy o identycznych wymiarach. Obrazy te różnią się wyłącznie w obszarach, które mają podlegać efektowi dynamicznej zmiany.

Pracując w programie GIMP, najlepiej wykonać obraz wielowarstwowy.

Po ukryciu warstwy zawierającej białą poświatę oraz warstw zawierających czarne teksty otrzymamy pierwszy z przedstawionych obrazów.

Gdy włączymy widoczność wszystkich warstw, wtedy ujrzymy drugi z obrazów, który zawiera białą poświatę liter w napisach menu.

Krojenie obrazu

{tlo_1}

Ilustrację służącą do wykonania witryny należy pokroić. Plik XCF otwieramy w programie GIMP, po czym dodajemy prowadnice wyznaczające zasięg opcji menu.

{/tlo}

{tlo_0}

Wykorzystując prowadnice, selekcję prostokątną oraz operacje Edycja | Kopiuj widoczne i Edycja | Wklej jako nowy przygotowujemy jedenaście obrazów.

{/tlo}

{tlo_1}

Obrazy te zapisujemy w plikach: gora.png, dol.png oraz g-0-0.png, g-0-1.png, …, g-2-2.png.

{/tlo}

{tlo_0}

Obrazy z napisami CHORDS, SONGS oraz TABS musimy przygotować podwójnie. Drugą porcję plików stanowiących menu tworzymy po uprzednim włączeniu widoczności warstwy z rozmytą białą otoczką oraz warstw z czarnymi napisami. Ponownie stosujemy prowadnice i technikę kopiuj-wklej. Obrazom z białą otoczką nadajemy przyrostek on: g-1-0-on.png, g-1-1-on.png oraz g-1-2-on.png.

{/tlo}

{tlo_1}

Rysunek zawiera zbiorcze zestawienie wszystkich obrazów, które należy przygotować. Komórki w których przygotowujemy podwójne obrazy są oznaczone kolorami czerwonym, niebieskim i zielonym. Obrazy te będziemy podmieniać po ich wskazaniu.

{/tlo}

Układ strony

Cały projekt wykonujemy stosując układ o stałej szerokości. Element div o identyfikatorze strona stanowi pojemnik na całą treść witryny. Dynamiczne menu, zawierające wszystkie obrazy, znajdzie się w elemencie {stala}div{/stala} o identyfikatorze {stala}naglowek{/stala}.

Do osiągnięcia poprawnego układu wystarczą trzy reguły zawierające razem siedem atrybutów CSS:

body {
    margin      : 0;
    padding     : 0;
    line-height : 0%;
    text-align  : center;
}
img {
    border : none;
}
#strona {
    margin : 0 auto;
    width  : 800px;
}

Atrybut {stala}text-align{/stala} jest konieczny dla przeglądarki MSIE w wersji 5. Tak wykonany układ będzie poprawnie wyświetlany przez nowe wersje przeglądarek (Firefox 1.5, Opera 7, Netscape 8, Internet Explorer 6), nieco starszą Internet Explorer 5.0 oraz archaiczną Netscape 4.75 (strona będzie brzydka, ale czytelna).

Menu z przylegających obrazów

Obrazy, które tworzą menu, układamy kolejno w bloku div o identyfikatorze naglowek:

Jeżeli w tak przygotowanej stronie usuniemy wszystkie białe znaki pomiędzy elementami img, to otrzymamy gotową stronę WWW. Pozostaje jedynie dodanie efektu wymiany obrazów oraz hiperłączy.

Wymiana obrazów

Reakcję na ruch myszki dodajemy do elementów img, wykorzystując zdarzenia onmouseover oraz onmouseout.

Obrazowi nadajemy identyfikator {stala}id=\”img0\”{/stala}. Cyfra 0 jest numerem kolejnego obrazu, który będzie podmieniany (obrazy nie podmieniane nie są numerowane).

Zdarzenie onmouseover będzie obsługiwane przez funkcję {stala}rollover_on(){/stala}. Parametrami funkcji są: identyfikator obrazu {stala}img0{/stala} oraz jego numer 0. Do obsługi zdarzenia {stala}onmouseout{/stala} stosujemy funkcję {stala}rollover_off(){/stala} z identycznymi parametrami. Oto kod HTML pierwszej opcji menu z napisem CHORDS:

Kod opcji SONGS różni się jedynie nazwami plików graficznych, identyfikatorem obrazu (tutaj jest to img1) oraz parametrami funkcji {stala}rollover_on(){/stala} i {stala}rollover_off(){/stala}:

Wprawdzie przy dwóch parametrach funkcji {stala}rollover_on(){/stala} oraz {stala}rollover_off(){/stala} mamy nieco więcej kodu HTML (ilość kodu można zminimalizować, stosując jeden parametr {stala}this{/stala}), jednak takie funkcje możemy zastosować w dowolnym miejscu kodu HTML do wymiany dowolnych obrazów na stronie.

Hiperłącza

Opcje menu powinny być hiperłączami. W tym celu kod HTML wzbogacamy o trzy elementy {stala}a{/stala}. Elementom {stala}a{/stala} oraz {stala}img{/stala} nadajemy atrybuty {stala}alt{/stala} oraz {stala}title{/stala}. Dzięki temu opcje menu będą dostępne również dla osób korzystających z przeglądarek nie wyświetlających obrazów i nie wykonujących kodu JavaScript.

Wstępne pobieranie obrazów

Element {stala}body{/stala} wzbogacamy o obsługę zdarzenia {stala}onload{/stala}. W ten sposób obrazy wykorzystane w menu będą pobierane z serwera przy wejściu na stronę, a nie dopiero po naprowadzeniu wskaźnika myszki na opcję, co mogłoby powodować – przy słabym łączu osoby odwiedzającej lub przeciążeniu sieci – niemiły efekt mrugnięcia lub wyświetlenie ikony brakującego obrazu.

W pliku rollover.js ustalamy liczbę wymieniamy obrazów (w opisywanym zadaniu wymianie podlegają trzy obrazy) oraz wpisujemy ich nazwy:

var rollovers_count = 3;
var filenames_off = new Array;
filenames_off[0] = \"g-1-0.png\";
filenames_off[1] = \"g-1-1.png\";
filenames_off[2] = \"g-1-2.png\";
var filenames_on = new Array;
filenames_on[0] = \"g-1-0-on.png\";
filenames_on[1] = \"g-1-1-on.png\";
filenames_on[2] = \"g-1-2-on.png\";

Sztywne wymiary obrazów

Ostatnim ulepszeniem opisywanego rozwiązania może być ustalenie wymiarów obrazów w arkuszach stylów. Dzięki temu strona będzie miała poprawny układ zanim obrazy zostaną pobrane z serwera.

Każdy obraz wzbogacamy o identyfikator:

zaś w stylach podajemy jego wymiar:

#gora {
    width  : 800px;
    height : 138px;
}

O czym należy pamiętać?

Przygotowując efekt rollover należy mieć na uwadze:

• wygląd strony w kilku różnych przeglądarkach (starszych i nowszych),
• zmianę wielkości okna przeglądarki,
• wstępne pobieranie obrazów zanim użytkownik wskaże opcję myszką,
• wyświetlanie strony, gdy nie wszystkie obrazy zostały pobrane z serwera,
• wygląd strony bez obrazów,
• wygląd strony bez zastosowania stylów,
• atrybuty alt oraz title umożliwiające poruszanie się po stronie przy wyłączonych stylach i skryptach JS.