Image map HTML

Image map adalah image yang di dalamnya ada satu atau lebih area yang berbentuk link.

Lihat contoh image map dibawah:

WP list

wordpress.org WP theme WP plugin WP codex

Di dalam image di atas terdapat empat link berbeda.

Code lengkap image map:

<body>

<img src="http://jujucode.files.wordpress.com/2014/08/map-image2.png" alt="WP list" usemap="#wplist" />

<map name="wplist"> 
<area title="wordpress.org" alt="wordpress.org" coords="40,28,256,59" shape="rect" href="http://wordpress.org/" target="" /> 
<area title="WP theme" alt="WP theme" coords="40,78,257,106" shape="rect" href="http://wordpress.org/themes/" target="" /> 
<area title="WP plugin" alt="WP plugin" coords="40,124,258,155" shape="rect" href="http://wordpress.org/plugins/" target="" /> 
<area title="WP codex" alt="WP codex" coords="41,168,256,195" shape="rect" href="http://codex.wordpress.org/Main_Page" target="" /> 
</map>

</body>

Tag area

Tag area berguna untuk menentukan area pada image yang akan diberi link.

Ada beberapa atribut yang harus ada di dalam tag area, yaitu: shape, coords, alt dan href.

Code tag area:

<area alt="" coords="" shape="" href="" target="" />

Atribut shape

Atribut shape berguna untuk menentukan bentuk dari area yang ada pada gambar.

Syntax

<area shape="default|rect|circle|poly">

Daftar pilihan atribut shape:

Atribut Penjelasan
default Seluruh image akan menjadi area
rect Area berbentuk segi empat
circle Area berbentuk lingkaran
poly Area berbentuk polygonal atau persegi banyak

Atribut coords

Atribut coords berguna untuk menentukan coordinate sebuah area pada sebuah image.

Syntax

<area coords="value">

Detail value dari coords bisa kamu lihat pada table dibawah:

Atribut Penjelasan
x1,y1,x2,y2 Khusus untuk atribut shape="rect" (Coordinate pada left-top, right-bottom)
x,y,radius Khusus untuk atribut shape="circle" (x,y adalah titik tengah dari lingkaran lalu diikuti besar dari radius lingkaran)
x1,y1,x2,y2,…,xn,vn Khusus untuk atribut shape="poly" (Jika pasangan dari coordinate terakhir dan pertama tidak sama maka browser akan menambahkan coordinate terakhir untuk menutup polygon)

Pasangan coordinate pertama yaitu 0,0 adalah pada ujung kiri atas image.

Secara manual, coordinate sebuah image bisa diketahui dengan menggunakan program seperti Ms Paint dari windows. Cara lainnya yang lebih mudah yaitu dengan menggunakan image map generator.

Atribut name dan usemap

Atribut name dan usemap berguna untuk menghubungkan image dan image map yang sudah dibuat.

Atribut name hampir sama dengan atribut id yaitu berguna untuk memberi nama atau label pada sebuah elemen yang nantinya elemen tersebut bisa dipanggil atau diakses menggunakan nilai dari atribut id tersebut. Perbedaannya adalah atribut id lebih cocok digunakan untuk CSS dan Javascript sedangkan atribut name lebih cocok digunakan untuk server side seperti web form.

Syntax

<img usemap="#mapname" />
<map name="mapname">

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>