tRikSonic
Tema

HTML map Tag

Terakhir diperbarui : 22 Mei 2018 - 07.06

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
HTML map
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.

Contoh HTML <map>

<img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1JBkrrnCqiHDihm0jMJkAdaWGcp5lL1jpULN8Owa1-x4B5NdlUc30Zk6DwlBkfOaTiDE-54ujHXByVg3EyZ0_tL6CthoJRFVOdTO1AYmTKeYy76hn-BbkDBicoUATKUcmnOk-NV60Sy3K/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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1JBkrrnCqiHDihm0jMJkAdaWGcp5lL1jpULN8Owa1-x4B5NdlUc30Zk6DwlBkfOaTiDE-54ujHXByVg3EyZ0_tL6CthoJRFVOdTO1AYmTKeYy76hn-BbkDBicoUATKUcmnOk-NV60Sy3K/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>

<p>
 Klik Logo Logo yang bertanda <b>HTML</b>, 
 dan silahkan tunggu
</p>

</body>
</html>
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
ElementChromeSafariFirefoxOperaIEEdge
<map>111YaYaYa
Mobile
ElementAndroid webviewChrome AndroidEdge mobileFirefox AndroidIE mobileOpera AndroidiOS Safari
<map>11Ya4YaYaYa

Default CSS :

Browser yang support dengan element <map>, mempunyai nilai default :
map {
    display: inline;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.