CSS

Efekt rollover w oparciu o elementy div i style CSS

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.

Włodzimierz Gajda

1 2 3 »

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

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.

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

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

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.

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.

19 lipca 2007

1 2 3 »

Powiązane publikacje

GIMP 2.4.17

Skomentuj
ten artykuł

Komentarzy: 1

środa, 27.05.2009 16:05marta

nie wychodzi problem pojawia się po wpisaniu onmouseout="rollover_off('img0', 0);"
onmouseover="rollover_on('img0', 0);" ,pojaiwa się komunikat o błędzie

Zobacz wszystkie komentarze »