MAP / 画像マップ(client-side image map)

対応

分類

開始タグ

要

終了タグ

無し

コンテント要素

とAREA

親エレメント

共通アトリビュート

event、i18n

解説

画像上のクリックする場所によって別のリンク先にジャンプする機能ををクリッカブルマップと呼びます。クリッカブルマップはサーバーサイド・イメージマップと、クライアントサイド・イメージマップがあります。MAPエレメントはクライアントサイド・イメージマップを設定します。 クライアントサイド・イメージマップは、未対応のブラウザもあります。クリッカブルマップを使用する際はテキスト・ブラウザのことも考慮しましょう。

オプション

対応	オプション	値	説　　　　明
	NAME	CDATA	イメージマップの名前を指定します。必須です。
	CLASS	CDATA	クラス名を指定します。
	ID	ID	IDを指定します。同じ文書内で同じIDは付けられない。
	STYLE	StyleSheet	CSSスタイルシートを設定します。
	TITLE	Text	リンク先の内容を設定します。 IEでは、マウスを近づけたときにバルーンでその内容が表示されます。

使用例

ソース

Aエレメントによる座標指定１（OBJECTのMAPコンテント編） OBJECTエレメントに未対応の時には（OBJECTとMAPは無視されるので）リンク文字（アメリカ）が表示されます。 <P><OBJECT DATA="../img/glb.gif" TYPE="image/gif" USEMAP="#Map1" WIDTH="175" HEIGHT="90"> <MAP NAME="Map1"> <A SHAPE="poly" COORDS="48, 38, 34, 29, 34, 15, 74, 4" HREF="#pagetop">アメリカ</A> </MAP></OBJECT>アメリカをクリックすると先頭へジャンプします。 と記述すると

表示＆操作

アメリカをクリックすると先頭へジャンプします。 と表示されます。 のみクリッカブルマップが正常に動作します。以降以降は画像が表示されますが動作しません。 ではリンク文字が表示されますが、その他は表示されません。よって現状は×。

ソース

Aエレメントによる座標指定２（OBJECTの空コンテント編） 常にリンク文字（アメリカ）が表示されます。 <P><OBJECT DATA="../img/glb.gif" TYPE="image/gif" USEMAP="#Map2" WIDTH="215" HEIGHT="125"></OBJECT> <MAP NAME="Map2"> <A SHAPE="poly" COORDS="48, 38, 34, 29, 34, 15, 74, 4" HREF="#pagetop">アメリカ</A> </MAP>アメリカをクリックすると先頭へジャンプします。 と記述すると

表示＆操作

アメリカをクリックすると先頭へジャンプします と表示されます。 以降、は、OBJECTエレメントで画像を表示した場合、 スクロールバーが縦横に付くのでWIDTHとHEIGHTをそれぞれ40、35ピクセル実際よりも大きく指定し解除しています。 しかし、画像の大きさは拡大しません。（通常の IMG エレメントでは拡大されます。） のみクリッカブルマップが正常に動作します。その他は画像が表示されますが動作しません。 リンク文字は表示されます。しかし画像が表示されないので△。

ソース

Aエレメントによる座標指定３（IMG編） OBJECTよりもIMGを使った方が無難でしょう。尚、代替テキストはMAP内にあるのでIMGのALT属性は空でも良いでしょう。 <P><IMG SRC="../img/glb.gif" WIDTH="175" HEIGHT="90" ALT="" USEMAP="#Map3"> <MAP NAME="Map3"> <A SHAPE="poly" COORDS="48, 38, 34, 29, 34, 15, 74, 4" HREF="#pagetop">アメリカ</A> </MAP>アメリカをクリックすると先頭へジャンプします。 と記述すると

表示＆操作

アメリカをクリックすると先頭へジャンプします。 と表示されます。 のみクリッカブルマップが正常に動作します。 常にリンク文字（アメリカ）が表示され、画像も表示されるので○。

ソース

AREAエレメントによる座標指定（IMG編） 現状ではAREAとIMGになるでしょう。また、AREAとIMGに未対応のブラウザのために、同じメニューをAエレメントでリンク文字として記述しておきましょう。 <P><IMG SRC="../img/glb.gif" WIDTH="175" HEIGHT="90" ALT="" USEMAP="#Map4"> <MAP NAME="Map4"> <AREA SHAPE="poly" COORDS="48, 38, 34, 29, 34, 15, 74, 4" HREF="#pagetop" ALT="" ACCESSKEY="y" TABINDEX="1" TITLE="USA"> </MAP><A HREF="#pagetop">アメリカ</A>をクリックすると先頭へジャンプします。 と記述すると

表示＆操作

アメリカをクリックすると先頭へジャンプします。 と表示されます。 クリッカブルマップで表示できて、リンク文字が表示されるので◎。

注意点

AエレメントのSHAPEやCOORDS属性に対応できるブラウザは、まだ少ないでしょう。今のところ対応ブラウザは、だけかも？

Copyright (C) pokochan 2000-2005
http://www.tees.ne.jp/~pokochan/html/map.html
pokochan@mx1.tees.ne.jp