Przejdź do treści

Odsyłacze

Odsyłacz obrazkowy

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="adres"><img src="ścieżka dostępu do obrazka" alt="tekst alternatywny" /></a>
gdzie jako "ścieżka dostępu" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek.
Zasady wpisywania adresu są analogiczne jak w przypadku odsyłaczy do: podstrony, etykiety, adresu internetowego, poczty e-mail czy dowolnych innych odsyłaczy (w zależności od wybranego typu odsyłacza).

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:

Kliknij na tym przycisku: Kliknij

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

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

Przykład:

Kliknij

Atrybut BORDER jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Rozszerzony odsyłacz obrazkowy (mapa odsyłaczy)

<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>
nazwa_mapy
Dowolny tekst, byleby był on taki sam w pierwszej i w drugiej linii, a dodatkowo w pierwszym wierszu musi być poprzedzony znakiem krzyżyka (#). Na jednej stronie nie mogą się znajdować dwie mapy o takiej samej nazwie!
(...)
Dalsze polecenia typu: <area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny" />, które stworzą następne aktywne pola na obrazku.
kształt
Kształt obszaru w mapie odsyłaczy:
  • "rect" - pole ograniczone prostokątem
  • "poly" - pole ograniczone wielokątem nieregularnym
  • "circle" - koło
współrzędne
  1. "xp,yp, xk,yk" - w przypadku prostokąta (rect):
    • xp - współrzędna pozioma lewego-górnego wierzchołka prostokąta
    • yp - współrzędna pionowa lewego-górnego wierzchołka
    • xk - współrzędna pozioma prawego-dolnego wierzchołka prostokąta
    • yk - współrzędna pionowa prawego-dolnego wierzchołka
  2. "x1,y1, x2,y2, x3,y3..." - w przypadku wielokąta (poly):
    • "xn,yn - współrzędne poziome i pionowe kolejnych wierzchołków wielokąta
  3. "x,y, r" - w przypadku koła (circle):
    • "x,y" - współrzędne środka
    • "r" - długość promienia

We wszystkich przypadkach współrzędne są liczone od lewego górnego wierzchołka obrazka, który stanowi punkt zerowy układu współrzędnych.

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 (X)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:

Mapa odsyłaczyDo podstronyDo etykietyDo adresu internetowego

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

Przykład:

Mapa odsyłaczyDo podstronyDo etykietyDo adresu internetowego

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 src="..." alt="..." ismap="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="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:

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):

Przykład mapy odsyłaczy po stronie serwera

Zobacz także

  • html
    Nagłówek i treść / Kolor odsyłaczy

    Jak zmienić kolor odsyłaczy (hiperłączy, odnośników hipertekstowych, linków) na stronie WWW?

  • html
    Nagłówek i treść / Roboty

    W jaki sposób ułatwić indeksowanie (wyszukanie) strony WWW przez roboty wyszukiwarek sieciowych (Google) lub sprawić, aby strona nie była odnajdowana przez wyszukiwarki? Jak zablokować indeksowanie zdjęć lub plików z określonego katalogu?

  • html
    Odsyłacze / Wstęp

    Jak stworzyć przejście do innej strony WWW (linki)?

Komentarze

Zobacz więcej komentarzy