Codingku change

Belajar Element HTML: <area>

Tag <area> menunjukkan area didalam map gambar.

map gambar merupakan gambar dengan satu atau lebih area dengan link hypertext yang bisa diklik pengguna pada area berbeda didalam gambar yang mengarah ke URL berbeda.

Elemen <area> ini hanya digunakan didalam elemen <map>.

Syntax

Tag <area> ditulis seperti ini <area shape="" coords="" href="" alt="">(tanpa tag penutup) dengan nilai atribut disematkan diantara tanda double quotes pada atribut masing-masing.

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

Kamu perlu menggunakan elemen <area> bersama dengan elemen lain seperti elemen <map> atau <template>, dan elemen <img> untuk menampilkan gambar yang akurat.

<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>

title

Menentukan judul area.

"Amerika Utara"

Judul akan tampil saat kursor diarahkan pada elemen area.

shape

Menentukan bentuk bidang (shape) area.

"rect"

Bentuk bidang segiempat dan memerlukan 4 kordinat.

"circle"

Bentuk bidang lingkaran dan memerlukan 2 kordinat dan 1 radius.

"polygon"

Bentuk bidang poligon dengan titik tak terbatas.

coords

Menjelaskan kordinat yang terkait dengan bentuk bidang.

"116,104,234,154"

Bentuk bidang persegi memeerlukan dua pasangan x1,y1,x2,y2, yang pertama menjelaskan pojok atas kiri, dan yang kedua pojok bawah kanan.

"50,80,20"

Bentuk bidang lingkaran memerlukan radius requires x,y,r. Pasangan tersebut menjelaskan pusat lingkaran.

"198,374,243,303,428,387,361,624,296,624"

Bidang poligon memerlukan beberapa pasangan x,y pairs.

href

Menentukan target area.

"https://codingku.id"

Kamu bisa menggunakan URL absolute.

"/element/div"

Kamu bisa menggunakan URL relative ke domain akar.

"mailto:luthfi@codingku.id"

Kamu bisa menggunakan protokol mailto.

target

Menentukan tab atau jendela mana yang akan ditampilkan.

"_blank"

Membuka tab baru.

"_self"

Membuka ditab yang sudah terbuka saat ini.

"_parent"

"_top"

Pengaturan Default CSS

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

area {
  display: none;
}