Uploaded by kerimex

Mapowanie obrazu

advertisement
Mapowanie obrazu
Mapowanie obrazu służy do tworzenia kilku odnośników w obrębie jednego obrazka.
Mapowanie obrazu możemy zastosować np. dla mapy Polski tworząc odnośniki w kształcie
obszarów województw.
Mapa odsyłaczy
Do tego celu HTML dostarcza mapę odsyłaczy, którą tworzymy, wykorzystując konstrukcję:
<img src="obrazek" alt="tekst" usemap="#name" />
<map id="id" name="nazwa">
<area shape="kształt" coords="współrzędne" href="adres" alt="tekst" />
…
</map>
Znaczniki i atrybuty:
usemap – nazwa zastosowanej mapy na danym obrazku,
<map> – tworzy nową mapę odsyłaczy,
id – unikalna nazwa id,
name – nazwa mapy (taka jak zdefiniowana w atrybucie usemap),
area – tworzy nowy obszar (odnośnik) na obrazku,
shape – kształt obszaru w mapie odsyłaczy.
Możliwe wartości shape :
rect – pole ograniczone prostokątem,
x1,y1,x2,y2 (x1 – współrzędna pozioma lewego górnego wierzchołka, y1 – współrzędna
pionowa lewego górnego wierzchołka, x2 – współrzędna pozioma prawego dolnego
wierzchołka, y2 – współrzędna pionowa prawego dolnego wierzchołka),
poly – pole ograniczone wielokątem,
x1,y1,x2,y2,…,xn,yn (n-liczba wierzchołków) liczby te są kolejnymi współrzędnymi
wierzchołków w poziomie i pionie wielokąta.
Współrzędne wartości shape
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.
Tworzenie mapy odsyłaczy
Po wywołaniu metody usemap, 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.
Przykład:
<img src="obrazek.JPG" alt="Mapa Odsyłaczy" usemap="#mapa" />
<map id="mapa" name="mapa">
<area shape="rect" coords="0,0,90,90" href="strona1.html" />
<area shape="rect” coords="0,90,90,180" href="strona2.html" />
<area shape="rect" coords="90,0,180,90" href="strona3.html" />
<area shape="rect" coords="90,90,180,180" href="strona4.html" />
</map>
Download