<area>

<map>要素で作成されたイメージマップに対して、リンクやイベント属性を指定できる領域を作成します。


ブラウザ

IE3 / IE4 / IE5 / IE5.5 / IE6 / N3 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

仕様

・構成
要素区分 エンドタグ ネストできる要素 備考
<map>の子要素 なし なし

・属性
属性名 必須 意味 値
alt ○ 表示できなかった場合の代替テキスト 任意のテキスト
shape イメージマップの形状
default
全体
rect
四角(規定値)
circle
円
poly
多角形
coords イメージマップの領域の座標
rect
左端のx座標,上端のy座標,右端のx座標,下端のy座標
circle
左端のx座標,上端のy座標,右端のx座標,下端のy座標
poly
頂点ごとのx,y座標
※　ただし、始まりと終わりの点の座標は同一にすること
href リンク先URL URL
nohref 非リンク部分であることを表す。 nohref
tabindex Tabキーで選択できる順番。 数値
accesskey 指定したキーがショートカットキーとして機能。 例：k
class class名 スタイルシートを設定したclass名
id id名 スタイルシートを設定したid名もしくは、任意のテキスト
title 説明文 任意のテキスト
style スタイル 任意のスタイル
lang 言語コード 例(日本語)：ja
dir 読む方向
rtl
右から左に読む
ltr
左から右に読む

・イベント
イベント 仕様
onclick クリック時に発生
ondblclick ダブルクリック時に発生
onmousedown 要素上でマウスボタンを押したときに発生
onmouseup 要素上でマウスボタンを離したときに発生
onmouseover ポインティングデバイスが要素上を通過したときに発生
onmousemove ポインティングデバイスが要素上で動くと発生
onmouseout 要素の領域から出るときに発生
onkeypress 要素上でキーが押されて、要素から離れたとき発生
onkeydown 要素上でキーが押されたとき発生
onkeyup 要素上で押されたキーを離したとき発生
onfocus フォーカスが合ったときに発生
onblur フォーカスが外れたときに発生

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
  </head>
  <body>
    <p>1. shapeにrect指定</p>
    <img src="../../../../images/development/htmlcss/map-image-rect.gif" alt="rect画像" usemap="#map-TEST1" width="243" height="68">
    <map name="map-TEST1">
      <area  alt="rect指定イメージマップ" shape="rect" coords="45,17,142,47" href="../../../../">
    </map>
    <br>
    <p>2. shapeにcircle指定</p>
    <img src="../../../../images/development/htmlcss/map-image-circle.gif" alt="circle画像" usemap="#map-TEST2" width="243" height="68">
    <map name="map-TEST2">
      <area alt="nohref指定部分" shape="circle" coords="54,35,15" nohref>
      <area alt="href指定部分" shape="circle" coords="54,35,26" href="../../../../">
    </map>
    <br>
    <p>3. shapeにpoly指定</p>
    <img src="../../../../images/development/htmlcss/map-image-poly.gif" alt="polyイメージ" usemap="#map-TEST3" width="243" height="68">
    <map name="map-TEST3">
      <area alt="poly指定イメージマップ" shape="poly" coords="164,30,166,46,177,54,192,54,203,47,206,33,199,20,187,13,172,18,164,30"
       href="../../../../">
    </map>
  </body>
</html>

表示結果

1. shapeにrect指定

rect画像 rect指定イメージマップ

2. shapeにcircle指定

circle画像 nohref指定部分 href指定部分

3. shapeにpoly指定

polyイメージ poly指定イメージマップ

▲PageTop

関連項目

HTML

<map> / <a> / <img>

▲PageTop

▲