HTML Image Map nedir? nasıl kullanılır? map koordinatları nasıl verilir?

HTML Image Map;

<IMG usemap> ve <IMG> etiketlerini kullanarak bir resmin belli bölgelerine hyperlink verilmesi için kullanılır. 
Bir resim üzerine map üç farklı şekilde tanımlanabilir;
• Rect (Dikdörtgensel)
• Circle (Dairesel)
• Poly (Çokgensel)

<MAP>  Etiketi

Resmin üzerinde tıklanabilir alanlar ve tıklandığında gideceği hedef tanımlanır. Bu etiketin NAME özelliğine bir isim verilir ki bu isim daha sonra haritaya başvuru yaparken kullanılmaktadır.
 

<AREA> etiketi ile <MAP> etiket bloğunun arasında tıklanabilir alanlar ve hedef linkler tanımlanır. <AREA> etiketinin özellikleri ise;

SHAPE: Tıklanabilir alanın şeklini belirtmek için kullanılan özelliktir. Rect, Circ, Poly değerlerini alabilir.
COORDS: Bu özellik ile SHAPE’de belirtilen şekle uygun koordinat bilgileri tanımlanır.
HREF: Bu özelliğine ise hedef Web Sayfası belirtilir.

Örnek haritalama kodu aşağıdaki gibidir.

<img src="example.jpg" alt="example demo" usemap="#example" width="400" height="400">

<map name="example">
  <area shape="rect" coords="34,44,270,350" alt="demo1" href="demo1.html">
  <area shape="rect" coords="290,172,333,250" alt="demo2" href="demo2.html">
  <area shape="circle" coords="337,300,44" alt="demo3" href="demo3.html">
</map>