Grafika#

Mapa odsyłaczy#

<img src="ścieżka dostępu" 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>

gdzie poszczególne atrybuty lub elementy oznaczają:

usemap - atrybut definiuje daną grafikę jako mapę odsyłaczy. Dla nazwa_mapy można podać dowolny tekst, byleby był on taki sam w pierwszej i drugiej linii. Przed nazwą mapy wstawiamy znak #. Tak jak w przypadku połączeń prowadzących do umieszczonych na stronie WWW zakotwiczeń, symbol ten stanowi dla przeglądarki wskazanie, by szukała mapy o nazwie nazwa_mapy na bieżącej stronie. Na jednej stronie nie mogą się znajdować dwie mapy o takiej samej nazwie!
map - znacznik definiuje mapę obrazów dla map odsyłaczy, posiada następujące atrybuty:
- name - wartość atrybutu definiuje nazwę mapy
- id - nadaje unikatowy identyfikator
area - element opisuje pojedynczy obszar, zawiera następujące atrybuty:
- shape - znacznik określa typ obszaru, dostępne są następujące wartości:
  - poly - wielokąt
  - rect - prostokąt (w tym również kwadrat)
  - circle - koło
  - default - cały obraz
- coords - określa punkty definiujące obszar, wartości podawane są w pikselach i po przecinku:
  - dla schape="rect" coords="x1, y1, x2, y2", gdzie:
    - x1 - współrzędna pozioma lewego górnego wierzchołka prostokąta
    - y1 - współrzędna pionowa lewego górnego wierzchołka prostokąta
    - x2 - współrzędna pozioma prawego dolnego wierzchołka prostokąta
    - y2 - współrzędna pionowa prawego dolnego wierzchołka prostokąta
  - dla schape="circle" coords="x, y, r", gdzie:
    - x i y - współrzędna pozioma lewego górnego wierzchołka prostokąta
    - r - promień koła
  - dla schape="poly" coords="x1,y1, x2,y2, x3,y3...xn, yn", gdzie:
    - x1,y1, x2,y2, x3,y3...xn, yn - współrzędne poziome i pionowe kolejnych wierzchołków wielokąta
  - 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.
- href - wartością jest adres URI łącza
- nohref - obszar, z którym nie jest powiązany żaden odnośnik, umożliwia to wycinanie powierzchni nieaktywnych z aktywnych.
- alt - wyświetla tekst alternatywny skojarzony z danym obszarem

Obecnie atrybut NAME dla elementów a oraz map jest zdeprecjonowany przez specyfikację XHTML 1.1 - zaleca się stosowanie ID. Ponadto wartością atrybutu usemap jest IDREF (nazwa_mapy), w starszych standardach jest to %URI (kotwica odsyłaczowa - #nazwa_mapy). Przeglądarki mają problemy z obsługą map odsyłaczowych zgodnych ze specyfikacją w przypadku MIME application/xhtml+xml.

Polecenia pozwalają zdefiniować specyficzną odmianę odsyłacza graficznego, tzw. mapę odsyłaczy. Są to obrazy, które pełnią funkcje wielu połączeń jednocześnie. Klikniecie zwykłego odsyłacza - tekstowego czy też w postaci obrazu - prowadzi pod konkretny adres URL, natomiast w obrazie zdefiniowanym jako mapa odsyłaczy, adres docelowy jest zależny od obszaru, w którym nastąpiło kliknięcie.

Ręczne tworzenie map odsyłaczy jest dość uciążliwe. Wiele edytorów (X)HTML posiada wbudowany generator map 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.

Mapy odsyłaczy mogą być efektowne, ale ze względu na swoją naturę działają tylko w przeglądarkach graficznych. W programach tekstowych nie będzie ani obrazu, ani jego funkcji nawigacyjnej, tak więc powinno się utworzyć ekwiwalent tekstowy obrazu, dzięki któremu użytkownicy przeglądarek tekstowych nie stracą dostępu do strony.

Przykład dla prostokąta:

<img src="../../pliki/html/grafika/mapaodsylaczy/map1.jpg" alt="mapa odsyłaczy " usemap="#mapa1" width="48" height="48" />
<map id="mapa1">
	<area shape="rect" coords="1,0,52,50" href="#" alt="odnośnik prowadzący na początek strony" />
</map>

Efekt:

Przykład dla koła:

<img src="../../pliki/html/grafika/mapaodsylaczy/map2.jpg" alt="mapa odsyłaczy" usemap="#mapa2" width="67" height="72" />
<map id="mapa2">
	<area shape="circle" coords="34,34,34" href="#" alt="odnośnik prowadzący na początek strony" />
</map>

Efekt:

Przykład dla wielokąta:

<img src="../../pliki/html/grafika/mapaodsylaczy/map3.jpg" alt="mapa odsyłaczy" usemap="#mapa3" width="66" height="66" />
<map id="mapa3">
	<area shape="poly" coords="30,0,65,29,35,65,1,34" href="#" alt="odnośnik prowadzący na początek strony" />
</map>

Efekt:

Przykład ze wszystkimi kształtami jednocześnie:

<img src="../../pliki/html/grafika/mapaodsylaczy/map4.gif" alt="mapa odsyłaczy" usemap="#mapa4" width="200" height="70" />
<map id="mapa4">
	<area shape="rect" coords="5,5, 56,65" alt="Grafika - Wstęp" href="html_grafika_wstep.html" />
	<area shape="poly" coords="61,64, 106,4, 133,56" alt="Grafika - Osadzanie" href="html_grafika_osadzanie.html" />
	<area shape="circle" coords="166,35, 31" alt="Grafika - Odsyłacz obrazkowy" href="html_grafika_odsylaczobrazkowy.html" />
</map>

Efekt:

Przypominam, że niektóre przeglądarki domyślnie otaczają dodatkowym obramowaniem grafiki, które pełnią rolę odsyłaczy. Zbędny ozdobnik można wyłączyć.

Nakładanie obszarów#

Obszary definiowane na mapach odsyłaczy mogą się nakładać (przy współrzędnych określających te same powierzchnie). Właściwość tą można wykorzystać. Załóżmy, że definiujemy na ilustracji po jednym okrągłym i kwadratowym obszarze z odsyłaczem. Chcemy dodatkowo, aby kliknięcie na pozostałych częściach grafiki przekierowywał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ą elementu 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.

Oto uzupełnienie ostatniego przykładu o dodatkowy obszar:

<img src="../../pliki/html/grafika/mapaodsylaczy/map4.gif" alt="mapa odsyłaczy" usemap="#mapa5" width="200" height="70" />
<map id="mapa5">
	<area shape="rect" coords="5,5,56,65" alt="Grafika - Wstęp" href="html_grafika_wstep.html" />
	<area shape="poly" coords="61,64,106,4,133,56" alt="Grafika - Osadzanie" href="html_grafika_osadzanie.html" />
	<area shape="circle" coords="166,35,31" alt="Grafika - Odsyłacz obrazkowy" href="html_grafika_odsylaczobrazkowy.html" />
	<area shape="rect" coords="0,0,200,70" alt="Grafika - Mapa odsyłaczy" href="html_grafika_mapaodsylaczy.html" />
</map>

Efekt:

Kliknięcie na białym obszarze powoduje dodatkowe przejście (ponowne wczytanie bieżącej strony). Takich nakładek możemy deklarować dowolną ilość. Ważne, by osobne obszary wyraźnie się odróżniały od siebie (nikt nie będzie zgadywał gdzie może kliknąć).

Po stronie serwera#

<a href="miejsce docelowe"><img src="ścieżka dostępu" alt="tekst alternatywny" ismap="ismap"></a>

Opisywana dotąd mapa odsyłaczy jest efektem działającym po stronie użytkownika. Pewnym jej ograniczeniem jest mała liczba wariantów pozwalających opisać kształty na grafice. Czasami obszary odsyłaczy zdefiniowane na ilustracji są skomplikowane. Może się zdarzyć, że nie uzyskamy odpowiedniego kształtu za pomocą atrybutu shape. Alternatywą pozostaje skorzystanie z map po stronie serwera.

W przypadku map po stronie serwera nie definiujemy żadnych obszarów, a jedynie po kliknięciu linku wysyłamy razem z nim współrzędne "x, y" punktu obrazu, który został kliknięty przez użytkownika. Odpowiednie oprogramowanie po stronie serwera (np. skrypt PHP) pobiera te dane, po czym może wykonać określone zadanie (w zależności od tego co otrzymał). Można np. wstawić na stronę grafikę z mapą geograficzną jakiegoś terenu, a kliknięcie na wybrany punkt spowoduje wyświetlenie zbliżenia tego obszaru albo dodatkowe informacje o wskazanej okolicy.

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

Prosty przykład:

<a href="">
	<img src="../../pliki/html/grafika/mapaodsylaczy/modliszka.jpg" alt="Modliszka gwinejska" ismap="ismap" style="border: 0; " width="250" height="167" />
</a>

Efekt:

Wartości współrzędnych można obserwować na pasku stanu przeglądarki (po umieszczeniu kursora nad grafiką) lub na pasku adresu przeglądarki (po kliknięciu na grafice).

Pasek społecznościowy

WebRef - kursy webowe

Grafika#

Mapa odsyłaczy#

Nakładanie obszarów#

Po stronie serwera#