Gemma Vidia Martantri
unread,Dec 4, 2009, 10:32:06 PM12/4/09Sign in to reply to author
Sign in to forward
You do not have permission to delete messages in this group
Either email addresses are anonymous for this group or you need the view member email addresses permission to view the original message
to praktikum-...@googlegroups.com
IMAGE MAP
Anda bisa menggunakan image yang ada pada website Anda untuk membuat image map. Image map adalah suatu area pada image yang bisa kita beri hyperlink. Area ini biasanya disebut “hot spots”. Koordinat dari hotspots ditentukan dengan menggunakan bidang geometri seperti segiempat(rectangle), poligon, dan lainnya.
] Bentuk-bentuk(shape) yang dapat digunakan sebagai hotspots :
o Rect
Hotspots berbentuk empat (rectangle).
Contoh penggunaan :
<area shape=rect coords= left-x,left-y,right- x,right-y href="menu.html" alt=”MenuKotak”>
o Circle
Hotspots berbentuk lingkaran (circle).
Contoh penggunaan :
<area shape=circle coords= center-X,center-Y, radius href="menu.html" alt=”MenuLingkaran”>
o Poly
Hotspots berbentuk area poligon.
Contoh penggunaan :
<area shape=poly coords=X1,Y1,X2,Y2,...,Xn,Yn href="menu.html" alt=”MenuPoligon”>
] Cara pendeklarasian map
Sebelum Anda membuat sebuah map, Anda harus mendeklarasikan map terlebih dahulu dengan menggunakan tag “map”. Caranya :
<map name=”peta”>
<area shape=rect coords= left-x,left-y,right- x,right-y href="menu.html" alt=”MenuKotak”>
<area shape=circle coords= center-X,center-Y, radius href="menu.html" alt=”MenuLingkaran”>
<area shape=poly coords=X1,Y1,X2,Y2,...,Xn,Yn href="menu.html" alt=”MenuPoligon”>
</map>
] Cara memanggil map
Untuk memanggil map yang telah Anda buat, pada tag <img src> ditambahkan tag :
usemap=”#nama_map”
<map name="peta">
<area shape=rect coords="0,0,50,70" href="menu.html" alt="MapKotak">
<area shape=circle coords="90,120,30" href="mine.html" alt="MapLingkaran">
<area shape=poly coords="150,217, 190,257, 150,297,110,257" href="new.html" alt="MapPoly">
</map>
<img src="gambar.jpg" alt="Gambar" border=0 width=300 height=300 usemap="#peta">