GIMP i webmastering: Wielopunktowe rollovery

Tym razem przygotujemy witrynę z bardziej skomplikowanym efektem rollover. Po wskazaniu wskaźnikiem myszki opcji menu wymienimy nie tylko ikonę opcji, ale także dodamy tytuł wybranej pozycji menu.

Obrazy do efektu rollover

Wykonanie wielopunktowego efektu rollover wymaga przygotowania kilku wersji obrazu. Zadanie to wykonujemy korzystając z warstw.

{tlo_1}

Pierwszy z obrazów będzie wykorzystany do otrzymania wyglądu witryny, w której opcje są niezaznaczone. Obszarami witryny, jakie użytkownik może wskazać wskaźnikiem myszki są cztery ikony narzędzi oraz napis Narzędzia. Napis Narzędzia jest zwykłym jednopunktowym rolloverem.

{/tlo}
{tlo_0}

Po wskazaniu napisu Narzędzia otrzymuje on białą poświatę. Ikony narzędzi są rolloverami wielopunktowymi. Po wskazaniu narzędzia kwadrat przedstawiający narzędzie zostaje otoczony białą obwódką, zaś w prawym górnym rogu pojawia się nazwa Narzędzia.

{/tlo}
{tlo_1}

Po wskazaniu klucza płaskiego pojawia się biały kwadrat oraz napis klucz płaski.

{/tlo}
{tlo_0}

Po wskazaniu kombinerek na obrazie pojawia się napis kombinerki oraz biały kwadrat dookoła ikony narzędzia.

Zatem wykonanie witryny wymaga przygotowania sześciu obrazów:

z odznaczonymi wszystkimi opcjami,
z zaznaczonym napisem Narzędzia,
z zaznaczoną opcją:
obcęgi,
kombinerki,
klucz francuski,
klucz płaski.

{/tlo}

Przygotowanie obrazów

Etap 1: wycinanie elementów

{tlo_1}

W obrazie skorzystano z czterech ikon przedstawiających narzędzia. Należy je wyciąć z przedstawionych fotografii.

{/tlo}
{tlo_0}

Elementy te możemy wyciąć wykorzystując zaznaczanie sąsiadujących obszarów.

{/tlo}

Etap 2: tło

{tlo_1}

Tworzymy nowy obraz i wypełniamy go szarym kolorem.

{/tlo}
{tlo_0}

Do obrazu dodajemy duży prostokąt wypełniony delikatnym szarym gradientem.

{/tlo}
{tlo_1}

Tworzymy długi czteropikselowy prostokąt. Element ten powielamy dwukrotnie. Trzy czarne linie (czyli wysokie prostokąty o szerokości czterech pikseli) rozmieszczamy tak, jak pokazano na rysunku.

{/tlo}
{tlo_0}

Wykonanie tła kończymy dodając dwie poziome linie o grubości czterech pikseli.

{/tlo}

Etap 3: ikony, kwadraty i napis

{tlo_1}

Do obrazu dodajemy cztery szare kwadraty.

{/tlo}
{tlo_0}

Kwadraty otaczamy czteropikselowym czarnym obramowaniem.

{/tlo}
{tlo_1}

Wklejamy wycięte ikony narzędzi. Ikony skalujemy do szerokości około 100 pikseli i obracamy o kąt -45 stopni.

{/tlo}
{tlo_0}

Tworzenie pierwszego obrazu kończymy dodając czarny napis Narzędzia. Pierwsza część pracy nad obrazem została zakończona.

{/tlo}

Etap 4: efekt rollover napisu narzędzia

{tlo_1}

Dodajemy białą poświatę napisu Narzędzia.

{/tlo}

Etap 5: białe obramowanie efektu rollover opcji menu

{tlo_0}

Dodajemy białe dwupikselowe obramowanie wewnątrz czarnych ram kwadratów.

{/tlo}

Etap 6: napisy dwupunktowego efektu rollover

{tlo_1}

W prawej górnej części obrazu umieszczamy podpisy ikon narzędzi: klucz płaski,

{/tlo}
{tlo_0}

Kombinerki oraz klucz francuski i obcęgi. Napisy umieszczamy w tym samym miejscu na osobnych warstwach. Każdy z napisów ozdabiamy identyczną poświatą.

W ten sposób zakończyliśmy wykonywanie obrazu XCF, na podstawie którego powstanie witryna WWW.

{/tlo}

Zamiana obrazu XCF w stronę WWW

Przygotowany obraz XCF należy pokroić. Do krojenia wykorzystujemy modyfikację widoczności warstw oraz operacje Edycja | Kopiuj widoczne i Edycja | Wklej jako nowy.

{tlo_1}

Obraz z odznaczonymi wszystkimi opcjami kroimy tak, by otrzymać osiem plików przedstawionych na rysunku: tlo.png, narzedzia.png, napis-brak.png, opcja-cegi.png, opcja-kombinerki.png, opcja-klucz-francuski.png, opcja-klucz-plaski.png, opcje-przerwa.png.

{/tlo}
{tlo_0}

Następnie zmieniamy widoczność warstw i wycinamy plik narzedzia-on.png, który posłuży do efektu rollover napisu Narzędzia.

{/tlo}
{tlo_0}

Teraz wykonujemy obrazy do efektu rollover menu głównego: opcja-cegi-on.png, opcja-kombinerki-on.png, opcja-klucz-francuski-on.png, opcja-klucz-plaski-on.png.

{/tlo}
{tlo_0}

Oraz obrazy do wielopunktowego efektu rollover: napis-klucz-francuski.png, napis-klucz-plaski.png, napis-kombinerki.png, napis-obcegi.png.

{/tlo}

Przygotowanie kodu HTML

Po wycięciu plików graficznych pozostało przygotowanie kodu HTML. Strona jest wykonana w oparciu o układ stałej szerokości. Zarys kodu HTML witryny jest przedstawiony na listingu 1.

Najważniejszymi elementami witryny są oczywiście podmieniane obrazy. Każdy z obrazów podlegających wymianie zawiera identyfikator id. Obrazami tymi są:

cztery ikony menu (identyfikatory id0, id1, id2, id3),
napis Narzędzia (identyfikator id4),
miejsce przeznaczone na napisy klucz płaski, kombinerki, itd. (identyfikator id5).

Wymiana obrazu Narzędzia jest wykonana przez następujący kod:

Jest to standardowy jednopunktowy rollover.

Nieco trudniej wygląda wymiana opcji menu. Pamiętajmy, że wskazanie na każdą z ikon menu głównego ma powodować dwie zmiany:

zmianę ikony opcji (dodajemy białą obwódkę),
dodanie napisu w prawym górnym narożniku strony.

Zmiany zachodzą w dwóch miejscach strony WWW. Stąd nazwa: wielopunktowy efekt rollover.

Zadanie takie wykonamy zmieniając funkcje odpowiedzialne za wymianę obrazów. Funkcje obsługujące dwupunktowy efekt rollover nazywają się {stala}rollover_on2(){/stala} oraz {stala}rollover_off2(){/stala}. Ich użycie wygląda następująco:

Każda z nich pobiera cztery parametry. Wymiana jednego punktu wymaga dwóch parametrów:

identyfikatora id obrazu, który należy wymienić,
numeru obrazu, który należy wstawić po spełnieniu warunku.

Po wskazaniu opcji menu myszką wymieniamy ikonę menu (parametry img0 oraz 0), jak również dodajemy odpowiedni napis w prawym górnym rogu strony (parametry img5 oraz 5).

Kod kolejnych opcji menu różni się wstawianym obrazem oraz parametrami funkcji JavaScript:

Funkcje wykonujące dwupunktową wymianę obrazów są przedstawione na listingu 3.

function rollover_on2(
    AElementID1, AImageNo1,
    AElementID2, AImageNo2
) {
    rollover_on(AElementID1, AImageNo1);
    rollover_on(AElementID2, AImageNo2);
}

function rollover_off2(
    AElementID1, AImageNo1,
    AElementID2, AImageNo2
) {
    rollover_off(AElementID1, AImageNo1);
    rollover_off(AElementID2, AImageNo2);
}

Ich działanie jest oparte na funkcjach jednopunktowych widocznych na listingu 2. Oczywiście w analogiczny sposób możemy przygotować efekty rollover wymieniające dowolną liczbę obrazów.

function rollover_on(AElementID, AImageNo)
{
    if (images_loaded) {
        var el = document.getElementById(AElementID);
        el.src = filenames_on[AImageNo];
    }
}

function rollover_off(AElementID, AImageNo)
{
    if (images_loaded) {
        var el = document.getElementById(AElementID);
        el.src = filenames_off[AImageNo];
    }
}