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
Random flashcards
123

2 Cards oauth2_google_0a87d737-559d-4799-9194-d76e8d2e5390

bvbzbx

2 Cards oauth2_google_e1804830-50f6-410f-8885-745c7a100970

Pomiary elektr

2 Cards m.duchnowski

słowka

2 Cards kksenia.kot1997

Create flashcards