Dwupunktowe rollovery ze wskaźnikiem wybranej opcji

Wykorzystując efekty typu rollover możemy pokosić się o dodanie wskaźnika wybranej opcji. Wskaźnik taki będzie informować użytkownika o bieżąco dokonanym wyborze.

Krok 1.

Układ witryny narysowany w programie GIMP
należy pokroić. Do obrazu dodajemy prowadnice,
które ułatwia krojenie.

Krok 2.

Ustalamy widoczność warstw obrazu tak, by
wszystkie opcje były wyłączone. Następnie wycinamy
z obrazu fragmenty:

• tlo.png (19 x 150),

• strona-główna-off.png, autorzy-off.png,
  roczniki-off.png, rubryki-off.png, podrubryki-
  off.png (50 x 81),
• strzalka.png (50 x 69),
• logo.png (227 x 150),
• logo-cd.png (267 x 81),
• napis-brak.png (267 x 69).

Krok 3.

Teraz włączamy widoczność strzałki wskazującej
wybór opcji Strona główna. Wycinamy z obrazu
fragment strzałka-wyb.png o wymiarach identycznych
jak strzalka.png (czyli 50 x 69).

Krok 4.

Następnie tak zmieniamy widoczność warstw,
by była widoczna biała poświata pierwszej ikony.
Wycinamy fragment strona-glowna-on.png
o identycznych wymiarach jak strona-glownaoff.
png (czyli 50 x 81).

Krok 5

Strzałki wskazującej wybór drugiej opcji nie musimy
wycinać: jest ona identyczna jak strzałka
pierwszej opcji. Pliki strzalka.png oraz strzalkawyb.
png posłużą do wybierania wszystkich pięciu
opcji z menu.

Krok 6

Przygotowujemy plik autorzy-on.png, który służy
do efektu rollover drugiej ikony. Zmieniamy widoczność
warstw (włączamy widoczność białej
poświaty, wyłączamy widoczność czarnej poświaty)
po czym wycinamy fragment o wymiarach
(jak poprzednio) 50 x 81.
W identyczny sposób przygotowujemy pliki
roczniki-on.png, rubryki-on.png oraz podrubrykion.
png.

Teraz należy przygotować kod HTML, w którym pocięte
pliki png ułożą się w jedna całość. Do ułożenia
fragmentów wykorzystamy trzy sekcje div o identyfikatorach
menu, logo oraz napis, które znajdują
się wewnątrz sekcji pojemnik. Układ witryny jest
przedstawiony na listingu 1.
Style, które należy nadać sekcjom div są widoczne
na listingu 2.

Krok 7.

Kod HTML z listingu 1 sformatowany stylami
z rysunku 2 będzie wyglądał tak, jak na rysunku.
Pamiętajmy o tym, by z kodu HTML usunąć
białe znaki znajdujące się pomiędzy znacznikami
img. Kod HTML od znacznika{html}

{/html} element
pojemnik powinien stanowić jedna długa
linie.

Ponieważ aplikacja, której skórkę przygotowujemy,
będzie stosowała szablony Smarty, to zamiast
ręcznie usuwać białe znaki (otrzymany kod będzie
bardzo nieczytelny i niewygodny w edycji) lepiej
zastosować funkcje {strip} szablonów Smarty.
Szablon Smarty przyjmie wówczas postać:

{strip}

...

{/strip}

Rollovery

Efekt wymiany obrazków wykonujemy w identyczny
sposób, jak to opisałem w artykule pt.
\”Wielopunktowe rollovery\”.
W pliku rollover.js, który zawiera definicje
funkcji {stala}rollover_on(), rollover_off(), rollover_
on2(), rollover_off2() oraz preload(),{/stala} wprowadzamy
nazwy wymienianych plików.

Wymianie podlegać maja ikony menu oraz napisy
pojawiające się z prawej strony. Po wskazaniu
pierwszej z ikon menu wskaźnikiem myszki
ma nastąpić wymiana dwóch obrazów:

• strona-glowna-off.png wymieniamy na
  strona-glowna-on.png,
• napis-brak.png wymieniamy na napis-strona-
  glowna.png.

Krok 8

Witryna z efektem rollover po wskazaniu myszka
drugiej z opcji jest przedstawiona na rysunku
Jest to rollover dwupunktowy. Podobnie, po
wskazaniu drugiej ikony ma nastąpić wymiana
obrazów:

• autorzy-off.png na autorzy-on.png,
• napis-brak.png na napis-autorzy.png.

Podobnie w przypadku pozostałych ikon. Nazwy
wymienianych plików należy wprowadzić w pliku rollover.
js do tablic filenames_off oraz filenames_on.
Łącznie mamy piec aktywnych ikon oraz jedno
miejsce dodatkowe: napis. Ikony otrzymają identyfikatory
img0, img1, img2, img3 oraz img4,
zaś obraz przeznaczony na napisy – img5.
W kodzie HTML dodajemy identyfikatory obrazów
oraz obsługę zdarzeń onmouseout i onmouseover.

Pierwsza z ikon, która miała kod:

przyjmie teraz postać:

Pamiętajmy, by obraz napis-brak.png uzupełnić
o identyfikator id=\”img5\”:

Krok 9

Ostatnim etapem pracy jest dodanie wskaźnika wybranej opcji. Po wybraniu
z menu pierwszej pozycji, pod ikona przedstawiającą domek ma się pojawić
strzałka.

Krok 10.

Gdy wybrana zostanie druga opcja, strzałka przesunie się w prawo.

Krok 11.

Oczywiście efekt rollover pozostaje aktywny, gdy stosujemy wskaźnik wybranej
opcji. Powyższy przykład pokazuje działanie efektu rollover na podstronie
Roczniki (ikona: kalendarz). Strzałka pojawia się pod ikona kalendarza,
zaś wskaźnik myszki wskazuje druga z ikon. Zwróćmy uwagę na rozjaśnienie
wywołane efektem rollover.

Krok 12

Ostatni rysunek pokazuje podstronę Rubryki (przedostania ikona). Wskaźnikiem
myszki wybrano pierwsza z ikon, co spowodowało rozjaśnienie tła
domku.

Strzałka pokazująca wybór jest zrealizowana poprzez wykonanie pięciu różnych
stron. Pierwsza z nich jest zatytułowana uklad-strona-glowna. Jest to strona
zawierająca opisany powyżej efekt rollover. Pod ikona domku umieszczono na niej
– w miejscu tła- strzałkę. Czyli zamiast obrazu strzalka.png wykorzystano obraz
strzalka-wyb.png. Druga strona nazywa sie uklad-autorzy.html. Na tej stronie
obraz strzalka- wyb.png został umieszczony poniżej ikony przedstawiającej
użytkownika. Podobnie wykonano pozostałe trzy strony. Oczywiście stosując PHP
oraz Smarty to zadanie możemy sobie uprościć. Zamiast przygotowywać piec plików
HTML, możemy przygotować jeden plik PHP ({stala}uklad.php{/stala}) i jeden szablon
({stala}uklad.html{/stala}).

W skrypcie PHP przekazujemy identyfikator id do szablonu jako
zmienna {stala}$akcja{/stala}:

if (isset($_GET[\'id\'])) {$akcja =$_GET[\'id\'];
} else {
$akcja = 0;
}
$s = new Smarty;
$s->assign(\'akcja\', $akcja);
$s->display(\'uklad.html\');

zaś w szablonie, w menu umieszczamy odwołania do adresów:

uklad.php?id=2
uklad.php?id=3
uklad.php?id=4
...

i na podstawie zmiennej {stala}$akcja{/stala} wymieniamy obraz przedstawiający
strzałkę:

{if $akcja == 3}

{else}

{/if}

Kod wymiany strzałki musi być umieszczony w szablonie tyle razy, ile
mamy ikon.