Mapowanie grafiki - obrazek odnośnikiem

Mapowanie odsyłaczy jest swoistym tworzeniem odnośnika z wybranego obszaru grafiki. Niezwykle przydatna rzecz przy tworzeniu np. topu gdzie możemy zrobić odnośnik tylko z loga, bez cięcia grafiki. Standardowe mapowanie wygląda następująco:

<img src="/grafika.gif" usemap="#mapa" />

<map name="mapa">
<area shape="rect" coords="1, 1, 50, 50" href="/adres_jakiejs_strony_lub_zakładki.html">
</map>

usemap - jest to informacja dla przeglądarki o tym iż dana grafika jest mapowana, dodatkowo zawiera parametr niczym styl css, który informuje o kształcie i jego rozmiarach. W 'href' dajemy adres pliku, który będzie wywołany po kliknięciu na odnośnik.

shape - określa kształt mapy odnośnika. Parametry to:

    rect: czyli prostokąt
    circle: jest to okrąg
    poly: wielokąt
    default: obszarem odnośnika będzie cała grafika

coords - atrybut określa współrzędne aktywnego odnośnika.

    rect: przyjmuje cztery wartości coords="od lewej, od góry, szerokość, wysokość"
    circle: przyjmuje trzy wartości coords="od lewej, od góry, promień okręgu"
    poly: wartości podane będą wierzchołkami wielokąt, czyli jego współrzędnymi np.:

<area shape="poly" coords="10, 21, 55, 25, 60, 29, 100, 200" href="/jakis_adres.html">

Dla efektu można dodać jeszcze atrybuty zdarzeń typu onclick, onmousedown itp.

Oto inny przykład, gdzie na obrazku są zamapowane trzy pola :

<img src="/abc.jpg" width="242" height="209" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="63,113,119,164" href="/stronaA" />
<area shape="rect" coords="129,110,186,169" href="/stronaB" />
<area shape="rect" coords="101,45,161,105" href="/stronaC" />
</map>

Kolejne literki obrazka są odnośnikami - tak jak w kodzie

 

Projekt © 2009 - INFOPROG 72084 odwiedzin