10.4: Thaûo Trang Web Duøng Ñieåm Noùng Theo Phöông Phaùp
Client-side
Nôi hình imagemap.gif (kích thöôùc 302 nhaân 41), hình
10-5, chuùng ta coù ba khu vöïc hình chöõ nhaät. Toïa ñoä cuûa caùc
khu vöïc hình chöõ nhaät ñoù laø: (1,0)-(100,41), (101,0)-(200,41), vaø
(201,0)-(300,41). Xem hình 10.6.
Löu YÙ: Toïa ñoä khoâng caàn thieát
phaûi chính xaùc. Tyû leä sai bieät vaøi phaàn traêm khoâng ñaùng keå.
Sau khi ñaõ bieát ñöôïc caùc toïa ñoä, vieát caùc maõ HTML ñeå bieåu
thò caùc ñieåm noùng seõ khoâng coù gì khoù khaên. Vì ñieåm noùng cuõng
duøng hình aûnh; do ñoù, chuùng ta cuõng seõ duøng tag <IMG> ñeå hieån
thò. Chuùng ta seõ theâm vaøo nôi tag <IMG> thuoäc tính USEMAP nhö sau:
<IMG SRC="imagemap.gif" USEMAP="#Teânmap">
#Teânmap seõ laø baát cöù moät teân naøo ñoù chuùng ta ñaët cho
phaàn MAP theo sau:
<MAP NAME="Teânmap">
<AREA SHAPE=RECT COORDS="1, 0, 100, 41"HREF="webpage1.htm">
<AREA SHAPE=RECT COORDS="101, 0, 200, 41" HREF="webpage2.htm">
<AREA SHAPE=RECT COORDS="201, 0, 300, 41" HREF="webpage3.htm">
</MAP>
Toùm laïi, muoán taïo caùc ñieåm noùng chuùng ta caàn ñeán hai tag. Tag
<IMG> ñeå ñaët böùc hình, vaø tag <MAP> ñeå xaùc ñònh caùc toïa ñoä.
Teân cuûa MAP seõ laø giaù trò cuûa thuoäc tính USEMAP trong tag <IMG>.
Beân trong caëp tag <MAP> vaø </MAP> chuùng ta seõ duøng tag <AREA>
ñeå xaùc ñònh caùc khu vöïc ñieåm noùng. Trong thí duï treân, chuùng ta
duøng 3 tag <AREA...> ñeå xaùc ñònh ba khu vöïc trong hình imagemap.gif.
Tag <AREA> khoâng caàn tag ñoùng </AREA>. Caùc khu vöïc trong hình
imagemap.gif coù hình chöõ nhaät neân chuùng ta duøng thuoäc tính SHAPE="RECT".
"RECT" laø chöõ vieát taét cuûa chöõ RECTANGLE (hình chöõ nhaät). Toïa
ñoä cuûa caùc hình chöõ nhaät ñoù ñöôïc vieát nôi thuoäc tính COORDS. "COORDS"
laø chöõ vieát taét cuûa chöõ COORDINATES (toïa ñoä). Ñòa chæ cuûa caùc
trang web maø chuùng ta seõ ñöôïc daãn tôùi khi chuùng ta nhaáp chuoät
vaøo caùc ñieåm noùng seõ ñöôïc ghi nôi caùc thuoäc tính HREF="...".
Caùc Daïng Cuûa Ñieåm Noùng
RECT hay RECTANGLE
Xaùc ñònh caùc ñieåm noùng hình chöõ nhaät. Duøng thuoäc tính naøy, chuùng
ta caàn cho bieát toïa ñoä cuûa goùc treân beân traùi cuûa hình chöõ nhaät
(top-left corner), vaø goùc döôùi beân phaûi cuûa hình chöõ nhaät (bottom-right
corner). Thí duï:
<AREA SHAPE="RECT" COORDS="0, 0, 100, 41" HREF="...">
POLY hay POLYGON
Xaùc ñònh caùc ñieåm noùng hình ña giaùc (polygon). Duøng thuoäc tính naøy,
chuùng ta caàn cho bieát toïa ñoä cuûa töøng ñænh cuûa hình ña giaùc. Thí
duï, hình nguõ giaùc vôùi naêm ñænh ôû caùc toïa ñoä (213, 41) (144, 23)
(173, 57) (200, 44) (244, 19):
<AREA SHAPE="POLY" COORDS="213, 41, 144, 23, 173, 57, 200, 44,
244, 19" HREF="...">
CIRC hay CIRCLE
Xaùc ñònh caùc ñieåm noùng hình troøn. Duøng thuoäc tính naøy, chuùng ta
caàn cho bieát toïa ñoä cuûa taâm ñieåm vaø chieàu daøi cuûa baùn kính.
Thí duï, moät hình troøn vôùi toïa ñoä cuûa taâm ñieåm ôû (342, 42) vaø
baùn kính 30 aûnh toá (pixel):
<AREA SHAPE="CIRC" COORDS="342, 42, 30" HREF="...">
