Of ChaichanPapa-World !

Home/Menu

ストリクトなHTMLの基礎講座

マップ要素(map,areaタグ等)の概説

◆ はじめに

本ページは、一枚の画像データをイメージマップするマップ要素をまとめてみました。

マップ要素は、一枚の画像に複数のアンカーを設定するための要素です。
尚、総称してクライアントサイド・イメージマップともいいます。

また、上記に対して、CGIを介したサーバーサイド・イメージマップもありますが、いろいろな理由で非推奨です。
ですので、とりあえず、クライアントサイド・イメージマップをマスターしましょう。

まずは、マップサンプルを見てください。

◆ マップサンプル

以下の画像の左上が「HTML概説リファレンス」へのアンカーで、右下が「ストリクトなHTMLの基礎講座」のアンカーになっています。

Test for map HTML概説リファレンス ストリクトなHTMLの基礎講座

◆ マップサンプルソース

<img src="../img/wp29b.gif" usemap="#maptest" alt="Test for map">
<map name="maptest">
<area href="../src/element.htm" shape="rect" coords="0,0,60,60" alt="HTML概説リファレンス">
<area href="../src/htmlmain.htm" shape="circle" coords="120,80,30" alt="ストリクトなHTMLの基礎講座">
</map>

◆ マップサンプル説明

このサンプルは、クライアントサイド・イメージマップです。では、上から順番に説明していきましょう。

img要素

まずは、HTML概説リファレンスのimg要素を参照してください。

usemap属性
map要素のname属性で指定されている名前のURIを指定して、画像にクライアントサイド・イメージマップを対応付けます。
あくまでも、URIで名前のみでないことに注意してください。つまり、名前の前に「#」が必要です。本来、仕様上は他のファイルのイメージマップも含みますが、現状の多くのブラウザは、対応していません。

map要素

まずは、HTML概説リファレンスのmap要素を参照してください。

name属性
クライアントサイド・イメージマップの名前を指定します。この名前は、img要素のusemap属性で使用されます。

area要素

まずは、HTML概説リファレンスのarea要素を参照してください。
ということで、属性の説明をいたします。

alt属性
画像が表示できないときの代替テキストを指定します。リンク先などを明記しておきましょう。
shape属性
ユーザ操作に反応する領域の形状を指定します。
  • rect - 四角形
  • circle - 円
  • poly - 多角形
  • default - 画像全体
coords属性
各形状毎に座標を「,」で区切って以下のように指定します。
座標の起点は、画像の左上が(0,0)になります。また、値は、「ピクセル数」または「%」で指定します。
尚、polyの場合は、最初と最後の座標を同じにしてください。
  • shape属性がrectの場合 - coords="左上のX座標,左上のY座標,右下のX座標,右下のY座標"
  • shape属性がcircleの場合 - coords="中心のX座標,中心のY座標,半径"
  • shape属性がpolyの場合 - すべての角の座標をX座標,Y座標の順で指定
nohref属性(nohref="nohref")
このイメージマップ(領域)にリンクがないことを明示します。
tabindex属性
タブキーでのマップ間移動の順番を指定します。順番は0から32767を指定できます。
accesskey属性
イメージマップへショートカットキーを割り当てます。
target属性
リンク先の文書を表示させるフレームやウィンドウの名前を指定します。

Home/Menu/HTML概説リファレンス