HTML map Tag

Tutorial HTML <map>

Element HTML map medefinisikan sebagai Peta Gambar pada HTML, element ini digunakan untuk menentukan satu atau lebih hyperlink pada sebuah gambar, ilustrasinya adalah navigasi link berupa gambar, berdasarkan koordinat yang sudah ditentukan

Dalam penerapannya pada HTML, element <map> terintegrasi dengan element <img> yang mempunyai attribute usemap.

Tag kelalaian (Tag omission) tidak berlaku untuk element ini, jadi element ini wajib memiliki tag pembuka dan tag penutup.

Element HTML <area> berperan penting ditulis didalam rentang element <map>...</map>. Element <area> digunakan untuk menentukan titik koordinat atau wilayah yang mempunyai hyperlink.

Attribute HTML <map>

name

Attribute ini wajib ditulis pada element <map> dan nilai atau value attribute ini tidak boleh ada karakter berupa space

Dalam menentukan value attribute ini diambil berdasarkan attribute usemap pada element <img>, perhatikan contoh berikut :

<img alt="demo" src="contoh.jpg" usemap="#conToh"/>

<map name="conToh">...</map>

Perhatikan tanda yang bertanda stabilo pada contoh diatas, keduanya harus sama dalam penulisannya baik besar kecilnya huruf ataupun karakter. Ingat karakter space tidak boleh digunakan. Attribute ini wajib diisi valuenya dan tidak boleh kosong.

Nilai atau value attribute ini adalah Nama_Map

Contoh HTML <map>

<img 
src="https://4.bp.blogspot.com/-39E4BBxkGv8/WjUb6w_hsaI/AAAAAAAABZM/tzU7J9m6v3MOosh8oaJvmKkgZKBULjlXwCLcBGAs/s1600/html-css-js.png" 
alt="image" 
usemap="#contoh" />

<map name="contoh">
    <area 
    alt="html" 
    title="HTML" 
    href="//triksonic.blogspot.com" 
    shape="poly" 
    coords="23,66,55,66,59,28,19,27"/>
</map>

Selengkapnya tentang HTML <area>

Global Attributes:

Element <map> mencakup Global Attributes HTML.

Event Attributes:

Element <map> mencakup Event Attributes HTML.

Browser Support HTML <map>

Desktop

Element	Chrome	Safari	Firefox	Opera	IE	Edge
<map>	1	1	1	Ya	Ya	Ya

Mobile

Element	Android webview	Chrome Android	Edge mobile	Firefox Android	IE mobile	Opera Android	iOS Safari
<map>	1	1	Ya	4	Ya	Ya	Ya

Default CSS :

Browser yang support dengan element <map>, mempunyai nilai default :

map {
    display: inline;
}