Tag <img> bisa dipasangkan dengan tag <map> yang perannya mirip dengan tag <a>. Bedanya, tag <map> menentukan area dalam gambar yang bisa diklik sebagai link. Setiap area punya shape / bentuk yang bisa ditentukan koordinatnya dengan atribut coords.
<HTML>
<HEAD>
</HEAD>
<BODY>
<img src="gambarku.jpeg" width="auto" height="240" alt="Rumahku" usemap="#rumah">
<map name="rumah">
<area shape="circle" coords="0, 0, 50, 50" href="coba.html" alt="Kiri_atas">
<area shape="rect" coords="60, 160, 80, 240" href="#" alt="Pintu" title="pintu" onclick="alert('pintu')">
</map>
</BODY>
</HTML>
</BODY>
</HTML>
Tag <Area>
Elemen <map> bisa terdiri dari beberapa tag <area> yang menetukan bagian gambar yang bisa diklik. Tag area memiliki atribut shape, href, coords, dan alt.
Shape menentukan bentuk bagian yang bisa diklik. Bentuk tersebut tidak bisa dilihat. Atribut shape bisa bernilai :
- default
- rect
- circle
- poly
Atribut coords menunjukkan beberapa titik koordinat yang membentuk shape. Coords tidak menunjukkan ukuran panjang maupun tinggi. Titik ketiga dan keempat mewakili koordinat kanan-atas dan kanan-bawah jika kalian menggunakan rect atau circle. Jika kalian menggunakan poly, maka kalian memerlukan lebih dari 4 titik karena area yang bisa diklik berbentuk polygon.
Saat suatu area diklik, halaman akan dipindahkan sesuai nilai atribut href. Jika kalian ingin menggunakan event handler untuk script, nilai href cukup diisi dengan "#".