Materi PWEB 2 : Gambar Map

Sebelumnya, kita pasti sudah tahu cara memasukan gambar kedalam dokumen html. Yaitu menggunakan tag <img src="nama gambar">.
Tetapi, dalam materi ini kita bisa memasukkan link kedalam gambar yg kita masukkan tersebut. Ini sering disebut sebagai image map.

Bagaimana Caranya ?
Disini kita menggunakan tag <map> dan <area>
Tag <map> support untuk semua browser populer seperti Google Chrome, Opera, Internet Explorer, Firefox, dan safari browser. Tampilan gambar dengan map merupakan suatu area pada gambar /image yang dapat diberi hyperlink area yang biasanya disebut ”hotspots”. Koordinatnya gambar ditentukan menggunakan bidang geometri seperti rectangle, polygon dan lain sebagainya.
Tag <map> digunakan untuk mendefinisikan sebuah tampilan gambar map pada sisi client-side. Sebuah gambar map adalah gambar merupakan area yang dapat diklik.

Contoh penulisan tag map di html :

<img src="picture1.jpg" alt="picture1" height="70%" usemap="#picture1">
<map name="#picture1">
<area shape="rect" coords="5,160,207,504" alt="1" href="1.html">
<area shape="rect" coords="214,162,426,503" alt="2" href="2.html">
<area shape="rect" coords="420,159,592,503" alt="3" href="3.html">
<area shape="rect" coords="604,173,750,505" alt="4" href="4.html">
<area shape="rect" coords="756,196,900,505" alt="5" href="5.html">
</map>

Hasil kodingannya, kita bisa mengklik bagian dari gambar tersebut

Bagian tersulit yaitu saat kita sedang menentukan kordinatnya. Tetapi ada cara yang lebih mudah dalam menentukan kordinatnya, yaitu menggunakan aplikasi Microsoft Expression Web. Kita hanya menggunakan cursor kita untuk menentukan kordinatnya. Maka akan lebih cepat.

Sekian, terima kasih...