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

◆ はじめに

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

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

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

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

◆ マップサンプル

以下の画像の左上が「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属性

リンク先の文書を表示させるフレームやウィンドウの名前を指定します。