Image: MAP＆AREA

クライアントサイド・イメージマップ

概論

サーバーサイド・イメージマップ CGIを利用してCGIスクリプト側でマップ領域を判断するのもです。 ユーザーサイド・イメージマップ ブラウザのマップ領域チェック機能を利用して行うものです。 HTMLだけでイメージマップを実現できます。: CGIを利用してCGIスクリプト側でマップ領域を判断するのもです。
ユーザーサイド・イメージマップ ブラウザのマップ領域チェック機能を利用して行うものです。 HTMLだけでイメージマップを実現できます。: ブラウザのマップ領域チェック機能を利用して行うものです。
HTMLだけでイメージマップを実現できます。

本論では「ユーザーサイド・イメージマップ」を説明します。

記述形式

<IMG SRC="URL" USEMAP="#name">
<MAP NAME="name">
<AREA SHAPE="option" COORDS="座標" HREF="リンク先URL">
</MAP> [ NN2,3,4,6,7 | IE2,3,4,5,6 ]

使用方法

円の領域を指定する
<AREA SHAPE="circle"> [ NN2,3,4,6,7 | IE2,3,4,5,6 ]

この場合、座標の記述は COORDS="x1,y1,r" です。
四角形の領域を指定する
<AREA SHAPE="rect"> [ NN2,3,4,6,7 | IE2,3,4,5,6 ]

この場合、座標の記述は COORDS="x1,y1,x2,y2" です。
多角形の領域を指定する
<AREA SHAPE="polygon"> [ NN2,3,4,6,7 | IE2,3,4,5,6 ]

この場合、座標の記述は COORDS="x1,y1,x2,y2,．．．xn,yn" です。
その他の領域
<AREA SHAPE="default""> [ NN2,3,4,6,7 ]
当然、COORDSは記述しません。

使用例

この図ではわかり易いように領域や座標が表示されていますが、実際は表示されません。
AREA はいくつでも設定できます。

option attribute

マップ名を指定する
<MAP NAME="name"> [ NN2,3,4,6,7 | IE2,3,4,5,6 ]
領域を指定する
<AREA COORDS="座標"> [ NN2,3,4,6,7 | IE2,3,4,5,6 ]
リンク先を指定する
<AREA HREF="URL"> [ NN2,3,4,6,7 | IE2,3,4,5,6 ]
領域を無効にする
<AREA NOHREF> [ NN2,3,4,6,7 | IE2,3,4,5,6 ]
代替テキストを表示する
<AREA ALT="comment"> [ NN2,3,4,7 | IE2,3,4,5,6 ]
アクセスキーを指定する
<AREA ACCESSKEY="*"> [ IE4,5,6 ]
例えば、ACCESSKEY="x" を指定している領域はキーボードの [ALT＋X] を押すとフォーカスがこの領域に移る。
TABキーを押すことでフォーカスが移動する順番を指定する
<AREA TABINDEX="num"> [ NN6,7 | IE4,5,6 ]
複数のタグで同一の名称(例えばHEAD部のCSS要素)を使用する
<MAP CLASS="name"> [ ~~IE4,5~~ nothing ]
<AREA CLASS="name"> [ ~~IE4,5~~ nothing ]
マップ及び領域に名称を付ける
<MAP ID="name"> [ NN6,7 | IE4,5,6 ]
<AREA ID="name"> [ NN6,7 | IE4,5,6 ]
スタイル属性を定義する
<MAP STYLE="property"> [ ~~IE4,5~~ nothing ]
<AREA STYLE="property"> [ ~~IE4,5~~ nothing ]
マップ及び領域に付加的情報をつける（ツールチップ）
<MAP TITLE="comment"> [ NN6,7 ~~IE4,5~~ ]
<AREA TITLE="comment"> [ NN6,7 | IE4,5,6 ]
ALTで指定したテキストの言語を指定する
<AREA ALT="comment" LANG="language"> [ IE4,5,6 ]
ALTで指定したテキストの読み方向を指定する
<AREA ALT="comment" DIR="ltr | rtl"> [ nothing ]
領域の上にフォーカスが移ったときにスクリプト処理をする
<AREA onFocus="処理 | 関数名"> [ NN6,7 | IE4,5,6 ]
他の領域にフォーカスが移ったときにスクリプト処理を行う
<AREA="***" onBlur="処理 | 関数名"> [ NN6,7 | IE4,5,6 ]
マップ及び領域をクリックしたときにスクリプト処理を行う
<MAP onClick="処理 | 関数名"> [ NN6,7 | IE4,5,6 ]
<AREA onClick="処理 | 関数名"> [ NN4,6,7 | IE4,5,6 ]
マップ及び領域をダブルクリックしたときにスクリプト処理を行う
<MAP onDblclick="処理 | 関数名"> [ NN6,7 | IE4,5,6 ]
<AREA onDblclick="処理 | 関数名"> [ NN4,6,7 | IE4,5,6 ]
マップ及び領域の上でマウスのキーを押し下げたときにスクリプト処理を行う
<MAP onMousedown="処理 | 関数名"> [ NN6,7 | IE4,5,6 ]
<AREA onMousedown="処理 | 関数名"> [ NN4,6,7 | IE4,5,6 ]
マップ及び領域の上でマウスのキーを上げた（元に戻した）ときにスクリプト処理を行う
<MAP onMouseup="処理 | 関数名"> [ NN6,7 | IE4,5,6 ]
<AREA onMouseup="処理 | 関数名"> [ NN4,6,7 | IE4,5,6 ]
マウスポインタがマップ及び領域の上に載ったときにスクリプト処理を行う
<MAP onMouseover="処理 | 関数名"> [ NN6,7 | IE4,5,6 ]
<AREA onMouseover="処理 | 関数名"> [ NN4,6,7 | IE4,5,6 ]
マウスポインタがマップ及び領域から外れたときにスクリプト処理を行う
<MAP onMouseout="処理 | 関数名"> [ NN6,7 | IE4,5,6 ]
<AREA onMouseout="処理 | 関数名"> [ NN4,6,7 | IE4,5,6 ]
マウスポインタがマップ及び領域の上で移動しているときにスクリプト処理を行う
<MAP onMousemove="処理 | 関数名"> [ NN6,7 | IE4,5,6 ]
<AREA onMousemove="処理 | 関数名"> [ NN4,6,7 | IE4,5,6 ]
マップ及び領域の上でキーボードのキーを押し下げたときにスクリプト処理を行う
<MAP onKeydown="処理 | 関数名"> [ NN6,7 | IE4,5,6 ]
<AREA onKeydown="処理 | 関数名"> [ NN4,6,7 | IE4,5,6 ]
マップ及び領域の上でキーボードのキーを上げた（元に戻した）ときにスクリプト処理を行う
<MAP onKeyup="処理 | 関数名"> [ NN6,7 | IE4,5,6 ]
<AREA onKeyup="処理 | 関数名"> [ NN4,6,7 | IE4,5,6 ]
マップ及び領域の上でキーボードのキーを押し下げた状態のときにスクリプト処理を行う
<MAP onKeypress="処理 | 関数名"> [ NN6,7 | IE4,5,6 ]
<AREA onKeypress="処理 | 関数名"> [ NN4,6,7 | IE4,5,6 ]