Image Mapping pada HTML

Image mapping adalah memetakan area-area tertentu pada suatu gambar menggunakan titik koordinat dan menghubungkannya ke link-link berbeda.

          Image mapping pada HTML dipetakan menjadi tiga macam area berbeda, yaitu rect untuk area berbentuk segiempat, circle untuk area berbentuk lingkaran, dan poly untuk area berbentuk segi sembarang.

          Untuk mengubah gambar biasa menjadi image map, ditambahkan atribut usemap pada tag <img>, dengan format sebagai berikut:

<img src=”gambar.jpg” usemap=”#nama-map”

Pada atribut usemap, ditambahkan value tanda hashmark (#) yang diikuti nama dari map yang akan dibuat.

Untuk membagi area image, ditambahkan tag map dan area yang saling terkait, dengan format sebagai berikut:

• Untuk area berbentuk segiempat
  
  

<map name=”nama-map”>      <area shape=”rect” coords=”x1,y1,x2,y2” href=”url-link”> </map>

         

Dimana nilai (x1,y1) adalah koordinat untuk titik sudut kiri-atas dan nilai (x2,y2) adalah koordinat untuk titik sudut kanan-bawah dari area segiempat yang dipetakan.

           Untuk area lingkaran

<map name=”nama-map”>      <area shape=”circle” coords=”x,y,r” href=”url-link”> </map>

Dimana x dan y adalah titik koordinat pusat lingkaran dan r adalah jari-jari yang diperoleh selisih antara titik pusat dan titik terluar lingkaran.

           Untuk area segi sembarang

<map name=”nama-map”>      <area shape=”poly” coords=”x1,y1,x2,y2,x3,y3,dst” href=”url-link”> </map>

Dimana value pada atribut coords adalah titik koordinat (x,y) untuk setiap titik sudut area poly yang ingin dipetakan.

Untuk menghubungkan antara tag <map> dan tag <img> yang akan dipetakan, nilai dari atribut usemap pada tag <img> dan atribut name pada tag <map> harus SAMA.