area要素・areaタグとは

イメージマップの区域を指定するarea要素

area要素はmap要素と共に利用されます(mapタグに包まれる子要素として記述されます)。
画像の一部区域を指定し、ハイパーリンクと関連付ける役割を持ちます。map要素の中に複数のarea要素を記述する事ができます。

[htmlsrc]
<img src="menu.gif" usemap="#map1" alt="メニュー" />
<map name="map1">
 <area href="guide.html" 
          alt="ガイド" 
          shape="rect" 
          coords="0,0,118,28">
 <area href="beginner.html" 
          alt="初めての方へ"
          shape="rect" 
          coords="184,0,276,28">
 <area href="recommend.html" 
          alt="お勧め情報" 
          shape="circle"
          coords="184,200,60">
 <area href="contact.html" 
          alt="お問い合わせ" 
          shape="poly" 
          coords="276,0,276,28,100,200,50,50,276,0">
</map>
[attr]
shape = default|rect|circle|poly
領域の形状を指定する。

  • default: 領域全体を指定する。
  • rect: 長方形の領域を指定する。
  • circle: 円形の領域を指定する。
  • poly: 多角形の領域を指定する。
coords = coordinates
スクリーン上の位置と形状を指定する。shape属性での指定により設定値と順序は変化する。

  • rect: left-x, top-y, right-x, bottom-y
  • circle: center-x, center-y, radius
  • poly: x1, y1, x2, y2, … xN, yN
    多角形を閉じるため、最初と最後の座標を一致させること。
nohref
当該領域は関連したリンクを持たないことを意味する。
[/attr]

コメントを残す

メールアドレスが公開されることはありません。