Ad image
Internet Maker

HTML: mapy odsyłaczy i osadzanie skryptów

Marcin Staniszczak
Marcin Staniszczak
7 minut(y) czytania

Zmierzamy ku końcowi kursu. Poznaliśmy już większość elementów HTML-a, wzbogaciliśmy swoja wiedzę o umiejętność posługiwania się kaskadowymi arkuszami stylów (CSS). Możemy zatem zbudować niemal każda statyczna witrynę. Przyda się jeszcze umiejętność posługiwania jakimś programem graficznym (np. GIMPem) oraz odrobina zdolności plastycznych.

Dziś zapoznamy się ze sposobem budowania tak zwanych map odsyłaczy. Mapy
odsyłaczy są zbiorem odnośników umieszczonych na obrazku. Dzięki nim możemy na
przykład użyć mapy Polski z podziałem na województwa, tak by klikniecie myszka
każdego województwa prowadziło do innej strony (zawierającej np. spis polecanych
kwater w danym rejonie kraju).

Zaczynamy

Mapy odsyłaczy można tworzyć tak, aby były obsługiwane po stronie serwera lub po
stronie przeglądarki. My zajmiemy się opisem jedynie tych działających po
stronie przeglądarki. W celu utworzenia mapy musimy zapoznać się z nowymi
znacznikami.

Są nimi {html}

…

oraz {/html}. Dodatkowo wprowadzimy nowy
atrybut do znacznika {html} – usemap.{/html}
Znacznik {html}

{/html} jest kontenerem zawierającym opis elementów mapy odnosników –
znaczniki {html}

{/html}. Przyjmuje tylko jeden atrybut – name, okreslajacy nazwe danej
mapy, która jest dalej wykorzystywana w znaczniku {html}{/html}.
Najistotniejszym i najbardziej złożonym znacznikiem przy budowie map odsyłaczy
jest znacznik {html}

.{/html} Pozwala on określić kształt poszczególnych elementów
wchodzących w skład mapy.

Przyjmuje następujące atrybuty:

Atrybut shape może przyjmować jedna z następujących wartości:

  • rect – pole odnośnika będzie prostokątem,

  • circle – pole odnośnika będzie okręgiem,

  • poly – pole odnośnika będzie wielokątem.

W zależności od wybranej wartości tego atrybutu, atrybut coords będzie
zawierał inne informacje. Dla wartości:

  • rect – będzie przyjmował wartości x1, y1, x2, y2, gdzie x1, y1 są
    współrzędnymi lewego górnego rogu prostokąta, zaś x2, y2 prawego
    dolnego,
  • circle – będzie przyjmował wartości x, y, r, gdzie x, y są współrzędnymi
    środka okręgu, zaś r jest promieniem okręgu,

  • poly – będzie przyjmował wartości x, y kolejnych wierzchołków wielokąta
    – wierzchołków tych może być wiele.

Atrybuty znacznika {html} {/html}już znamy. Nowy atrybut – usemap – przyjmuje
nazwę mapy, która ma być użyta jako mapa odnośników na danym
obrazku. Nazwa ta musi zostać poprzedzona znakiem #.

Prosty przykład

Wiemy już w jaki sposób zbudować mape odsyłaczy, przyjrzyjmy się wiec
prostemu przykładowi:

Powyższy kod opiera się o obrazek z rysunku 1 (opisy współrzędnych zostały
dodane w celu objaśnienia współrzędnych w kodzie i w rzeczywistości na obrazku
nie występują). Obrazek ten ma rozdzielczość 400 x 400 pikseli. Współrzędne
odsyłaczy umieszczonych na obrazku podaje się w odniesieniu do lewego górnego
rogu tego obrazka (ma on współrzędne 0,0), nie zaś do rogu całej strony.

Cała mapa składa się z sekcji {html}

{/html} wraz ze znacznikami określającymi położenie oraz
kształt poszczególnych odnośników – {html}

{/html}. Wierzchołki wielokąta (poly) musza
być podawane po kolei (od lewej do prawej, badz od prawej do lewej – nie ma przy
tym znaczenia od którego wierzchołka zaczniemy te współrzędne podawać).

Nazwa mapy wymieniona w atrybucie usemap znacznika {html}{/html} musi zostać poprzedzona
znakiem #! Bez tego nasza mapa nie będzie działać. Przy tak zdefiniowanej mapie
na obrazku znajda się trzy pola będące odnośnikami – kwadrat, okrąg oraz
wielokąt. W rzeczywistości mapy odsyłaczy są o wiele bardziej złożone i często
przy ich budowie korzysta się z oprogramowania pomocniczego. Jednym z programów
oferujących odpowiednie możliwości jest polski Pajączek. Niestety, edytor ezHTML
nie ma takiej funkcjonalności.

Na rys. 2 jest gotowa strona z mapa odsyłaczy oparta na naszym przykładowym
obrazku.

JavaScript na naszej stronie

W internecie można znaleźć wiele skryptów napisanych w języku Java-
Script – od prostych efektów, po rozwijane menu. Na stronach tych można także bez trudu odnaleźć opis integracji takiego skryptu z nasza strona.
Trzeba jednak wiedzieć w jaki sposób można do niej takie skrypty dołączyć.
Są na to dwa sposoby.

Pierwszy wymaga umieszczenia kodu skryptu bezpośrednio w kodzie
strony. Skrypt ten powinien zostać umieszczony pomiędzy znacznikami
{html}{/html}. W naszym przypadku znacznik ten powinien wyglądać
następująco:

Pamiętajmy o odpowiednim ustawieniu atrybutów type oraz language. Oto
przykładowy skrypt:

Zauważmy, że skrypt został umieszczony w komentarzu HTML. Komentarz
ten zabezpiecza stronę przed przeglądarkami nieobsługującymi skryptów
JavaScript – bez niego wyświetliłyby na stronie kod skryptu, tak jak
gdyby był on jej treścią. JavaScript ignoruje znaki komentarza HTML.

Drugim sposobem korzystania ze skryptów JavaScript jest umieszczenie
skryptu w osobnym pliku, poza kodem HTML. Musimy wówczas wczytać
odpowiedni skrypt na naszej stronie za pomocą znacznika: