Wstęp

Do tej pory przedstawione zostały jedynie odsyłacze tekstowe, tzn. na ekranie był wyświetlany pewien krótki tekst (opis odsyłacza), po kliknięciu którego, następowało przeniesienie do wskazanego adresu. Łatwo zauważyć, że to nie wszystkie możliwości, jakie dają odsyłacze. Na większości stron internetowych można spotkać "aktywne" obrazki, symulujące przyciski. Po kliknięciu, zachowują się one jak zwykły odsyłacz (w istocie są one odsyłaczami). Wprowadzenie takich przycisków na stronę jest prostsze niż myślisz - wystarczy pamiętać, że wewnątrz znacznika odsyłacza (pomiędzy <a href="..."> a </a>) można umieszczać nie tylko tekst, ale również inne znaczniki - m.in. odpowiadające za zmianę wyglądu tekstu (pogrubienie, pochylenie itd.), czy też wstawienie obrazka. Ważne jest jedynie, aby nie wstawiać tam elementów wyświetlanych w bloku, ponieważ jest to niedozwolone!

Podstawowy odsyłacz obrazkowy <a href, img>

<a href="adres"><img src="ścieżka dostępu do obrazka" alt="tekst alternatywny"></a>

Odsyłacz ten zostanie uruchomiony, gdy klikniemy myszką obrazek, do którego podajemy ścieżkę dostępu. Dzięki niemu możemy stworzyć np. efektowne przyciski odsyłaczowe w menu strony.

Obrazki przycisków najlepiej zapisywać w formacie GIF, większe zdjęcia - JPG. Jeśli nie masz zacięcia artystycznego, nie musisz samodzielnie rysować wszystkich grafik. W Internecie na pewno znajdziesz wiele stron, gdzie możesz darmowo pobrać gotowe przyciski.

Tekst alternatywny (atrybut alt="..." dla znacznika <img>) może pojawić się w "dymku" narzędziowym po wskazaniu obrazka myszką (Microsoft Intetnet Explorer). Jest to jednak przede wszystkim informacja dla przeglądarek tekstowych, które nie wyświetlają grafiki. Dzięki temu również w takich przeglądarkach możliwe będzie używanie odsyłacza obrazkowego, chociaż grafika nie zostanie wyświetlona.

Jeżeli nie podasz tekstu alternatywnego (atrybut alt="..." dla znacznika <img>) dla obrazka w odsyłaczu, użytkownicy z przeglądarkami tekstowymi albo z wyłączonym wyświetlaniem obrazów mogą mieć utrudnioną lub wręcz uniemożliwioną nawigację w takim menu!

Przykład <a href, img>

Kliknij na tym przycisku:

Aby usunąć obramowanie wokół obrazka, należy wpisać:

<a href="..."><img src="..." style="border: 0" alt="tekst alternatywny"></a>

Przykład <a href, img {border}>

Rozszerzony odsyłacz obrazkowy (mapa odsyłaczy) <img, map, area>

<img src="ścieżka dostępu do obrazka" alt="tekst alternatywny" usemap="#nazwa_mapy">
<map id="nazwa_mapy" name="nazwa_mapy">
	<area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny">
	<area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny">
	(...)
</map>

Po wywołaniu tej komendy, zostanie wczytany obrazek o podanej ścieżce dostępu. Następnie będzie on podzielony na kilka pól (w sposób niewidoczny), z których każde będzie przyporządkowane oddzielnemu odsyłaczowi. Dzięki temu na tylko jednym rysunku możemy umiejscowić więcej niż jeden odnośnik.

Wiele edytorów HTML posiada wbudowany generator mapy odsyłaczy, dzięki któremu można w prosty i szybki sposób określić współrzędnie poszczególnych obszarów, wskazując kolejne punkty myszką na wyświetlonym obrazku.

UWAGA! Wielu użytkowników Internetu wyłącza wyświetlanie grafiki na stronach, aby przyspieszyć wczytywanie. W takim przypadku praktycznie nie będą oni mogli przenieść się do miejsc wskazanych na obrazkowej mapie odsyłaczy.

Z tego powodu warto również umieścić gdzieś zwykłe odsyłacze hipertekstowe, prowadzące do tych samych dokumentów. Można także zastosować odnośnik do strony alternatywnej - dla przeglądarek które nie wyświetlają grafiki. Ponadto tekst alternatywny jest informacją dla przeglądarek tekstowych, które nie wyświetlają grafiki.

Przykład <img, map, area>

Aby usunąć obramowanie wokół obrazka, należy podać atrybut style="border: 0" dla znacznika <img>.

Przykład <img {border}, map, area>

Nakładanie obszarów

Załóżmy, że chcemy uzyskać następujący efekt: definiujemy na przygotowanym obrazku jeden okrągły i jeden trójkątny obszar z odsyłaczami, ale chcemy dodatkowo, aby kliknięcie na dowolnych pozostałych częściach grafiki, odsyłało na osobny adres. Możemy tego dokonać definiując na końcu trzeci kształt, o takich samych rozmiarach jak wymiary całego obrazka. Jeżeli powierzchnie, zdefiniowane na obrazku za pomocą znacznika <area>, nakładają się, pierwszeństwo mają te obszary, które zostały zdefiniowane wcześniej. Dlatego kształt wstawiony na końcu, nie przykrywa ustalonych wcześniej obszarów, ale zostaje umieszczony pod nimi.

Mapa odsyłaczy po stronie serwera <a href, img ismap>

<a href="..."><img src="..." alt="..." ismap></a>

Czasami obszary odsyłaczy zdefiniowane na obrazku, mogą być bardzo skomplikowane. Może się zdarzyć, że nie uzyskamy pożądanego kształtu z pomocą <area shape="...">. W takim przypadku można skorzystać z mapy odsyłaczy po stronie serwera. Idea jest prosta: w kodzie źródłowym strony nie definiujemy żadnych obszarów, a jedynie po kliknięciu linku wysyłamy razem z nim współrzędne "x, y" punktu na obrazku, który kliknął użytkownik. Następnie oprogramowanie na serwerze (np. skrypt PHP) odczyta te współrzędne i wyświetli odpowiednią treść. Na przykład można wstawić na stronę grafikę z mapą geograficzną jakiegoś terenu, a kliknięcie na wybrany punkt spowoduje wyświetlenie zbliżenia tego obszaru albo informacji o wskazanej okolicy.

Aby użyć mapy odsyłaczy po stronie serwera, wystarczy dodać do obrazka atrybut ismap. Po kliknięciu, przeglądarka automatycznie doklei na końcu adresu odsyłacza ?x,y - czyli współrzędne punktu kliknięcia liczone od lewego-górnego narożnika grafiki.

Przykład <a href, img ismap>

Po kliknięciu na poniższym obrazku, do linku zostaną doklejone współrzędne wskazanego punktu (po wczytaniu nowej strony, zobacz pasek adresu Twojej przeglądarki):