Codingku change

Belajar Element HTML: <map>

Tag <map> digunakan untuk mendefinisikan gambar map (peta).

Gambar map adalah gambar yang memiliki area yang dapat diklik.

Setiap area yang dapat diklik ini dapat mengarah ke lokasi yang berbeda.

Oleh karena itu, gambar map berpotensi memiliki banyak tautan yang mengarah ke berbagai URL.

Tag <map> digunakan bersama dengan tag <area> dan <img> untuk menentukan peta gambar.

Syntax

Tag <map> ditulis seperti <map name=""></map> dengan tag <area> diletakkan diantara tag pembuka dan penutup.

<img src="/images/world-continents.png" width="320" height="160" orgwidth="320" orgheight="160"
  usemap="#world-continents">
<map name="world-continents">
  <area title="North America" href="https://en.wikipedia.org/wiki/North_America" shape="poly"
    coords="48,89,67,69,77,49,140,0,68,0,6,10,4,31,16,69">
  <area title="South America" href="https://en.wikipedia.org/wiki/South_America" shape="poly"
    coords="48,88,61,74,119,99,95,160,66,159">
  <area title="Europe" href="https://en.wikipedia.org/wiki/Europe" shape="poly"
    coords="124,49,145,46,158,50,187,43,198,6,146,1,115,21">
  <area title="Africa" href="https://en.wikipedia.org/wiki/Africa" shape="poly"
    coords="121,53,140,47,169,51,186,77,196,80,188,137,156,136,138,97,118,86">
  <area title="Asia" href="https://en.wikipedia.org/wiki/Asia" shape="poly"
    coords="166,50,184,77,201,74,215,91,258,108,263,87,283,74,297,8,192,3,191,29,187,46,170,42">
  <area title="Australia" href="https://en.wikipedia.org/wiki/Australia_(continent)" shape="poly"
    coords="257,107,263,85,314,89,316,137,294,151,249,132,248,114">
</map>

name

Menentukan nama map yang akan digunakan atribut usemap pada elemen img.

"world-continents"

<img usemap="#world-continents"> akan menggunakan map ini.

Pengaturan Default CSS

Sebagian besar browser menampilkan elemen <map> dengan pengaturan CSS:

map {
  display: inline;
}