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 spaceDalam 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
| 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;
}