area要素 (イメージマップ / Image map)

<img usemap="#area" src="sample.png" width="300" height="300" />
<map name="area">
  <area shape="rect"   coords="0,50,300,150" />
  <area shape="circle" coords="150,150,140" href="#" />
</map>

属性

shape

  • rect… 長方形の領域 (rectangular region)
  • circle … 円形の領域 (circular region)
  • poly … 多角形 (plolygon)
  • default … 任意の形状の領域

coords

shapeの値に応じて、次のように座標を指定します。

  • rect… x1,y1,x2,y2
  • circle … x,y,radius
  • poly … x1,y1,x2,y2,x3,y3,…
  • default …

境界線の表示

area要素が適用された領域は表示されず、その存在はマウスポインタを重ねたときしか確認できません。またCSSによるスタイルも適用されないため、視認できるようにするにはスクリプトで境界線を描画するようにします。css - How to apply Hovering on html area tag? - Stack Overflow

参考

HTMLの情報サイトから、まとめて検索