|
ホーム＞HTMLリファレンス（アルファベット検索）＞<area>タグ
<area>…イメージマップの領域を設定する
使用タグ
 |
<area 属性="属性値"> |
開始タグと終了タグ |
開始タグのみ |
内容となる
要素 |
なし
|
 |
      |
 解説
 <area>タグを使えば、クライアントサイドイメージマップの画像の中でリンクの領域を作ることができます。
まず、<img>タグで画像にイメージマップ名を指定し、<map>タグで<img>タグからマップで使用する画像を参照できるようにイメージマップ名を指定します。そして、<map>タグの内容に<area>でクリックできる領域を設定します。
|
属性と働き
| 属性 |
働き |
指定できる値 |
| href="URL" |
イメージマップのリンク先のURLを指定できる |
イメージマップのリンク先のURLを指定 |
| alt="テキスト" |
イメージマップの領域の代替テキストを指定できます |
画像の内容を示すテキスト |
| shape="領域の形状" |
イメージマップの形状を指定します |
「default」（領域全体）、
「rect」（長方形）、
「circle」（円家）、
「poly」（多角形） |
| coords="座標" |
イメージマップの座標を指定します |
座標を指定する |
| shape="rect" coords="座標" |
イメージマップの領域を長方形にします |
左上の頂点のX座標とY座標、右下の頂点のX座標とY座標の全ての値を「,」カンマで区切り指定
例：（10,10,110,110） |
| shape="circle" coords="座標" |
イメージマップの領域を円形にします |
円の中心のX座標とY座標、円の半径の全ての値を「,」カンマで区切り指定
例：（60,60,25） |
| shape="poly" coords="座標" |
イメージマップの領域を多角形にします |
辺をなぞるような順番で、それぞれの頂点のX座標とY座標、最後にはじめの頂点のX座標とY座標を指定して全ての値を「,」カンマで区切る
例：（10,10,110,5,120,220,15,70,10,10） |
| target="フレーム名" |
イメージマップのクリック可能な領域のリンク先のページをどのフレームで表示するか指定 |
フレーム名、「_blank」(新しいウィンドウ)、「_self」(同じフレーム)、「_parent」(親フレーム)、「_top」(一番上位のウィンドウ)
|
| nohref="nohref" |
イメージマップの領域にリンク先がないことを示す |
nohref |
使用例
記述例
<img src="image/map.gif" alt="イメージマップ" usemap="#map" border=0 width=300 height=100>
<map name="map">
<area shape="rect" coords="10,10,90,90" alt="四角形" href="http://hpzeroguide.web.fc2.com/">
<area shape="circle" coords="150,50,40" alt="円形" href="http://hpzeroguide.web.fc2.com/">
<area shape="poly" coords="200,30290,10,270,90,210,50" alt="多角形" href="http://hpzeroguide.web.fc2.com/">
</map>
|
|
[ブラウザでの表示例]
| ブラウザ |
|
△ページトップへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他
|
