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" /> |
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