The Web Design Group

MAP−イメージ・マップ

構  文 <MAP>...</MAP>
属性仕様
内  容 一つ以上のブロック−レベル要素乃至は一つ以上のAREA要素
内容になる インライン要素, ブロック−レベル要素

 MAP要素は、 IMGOBJECTを使って、 クライアント側イメージ・マップを定義します。 MAPで必要なNAME属性は、 IMGOBJECTUSEMAP属性のアンカーと使われます。 MAP要素は他のファイルに組み込まれたイメージ・マップを定義できますが、典型的にはブラウザは同じファイル上のMAPをもったクライアント側イメージ・マップを画像としてサポートしません。

 MAPは一つ以上のAREA要素を取るよう定義でき、そこで画像のクリックできる領域の座標を特定します。例として以下のように:

<MAP NAME=mymap>
<AREA HREF="/reference/" ALT="HTML and CSS Reference" COORDS="5,5,95,195">
<AREA HREF="/design/" ALT="Design Guide" COORDS="105,5,195,195">
<AREA HREF="/tools/" ALT="Tools" COORDS="205,5,295,195">
</MAP>
<IMG SRC="sitemap.gif" ALT="Site map" USEMAP="#mymap" WIDTH=300 HEIGHT=200>

 HTML 4.0では機能が拡張され、 AREA要素を使うことの代替えとして一つ以上のブロック−レベル要素を取ることができます。 OBJECT要素との組み合わで、読み込まれない画像の代替え内容が可能です。しかし OBJECTのサポートは貧弱でバグもあるので、 IMG要素によるクライアント側イメージ・マップがより信頼性があります。

 MAPOBJECT内にある場合その内容は画像読み込みブラウザでは表示されません。 MAPもまた、 OBJECT要素の外でも使うことはでき、その内容は表示されます。

 以下の例では二つの画像をもち、イメージの最初のタイプがサポートされていないなら一つは代替えです。 画像はOBJECT要素内にあるどれか一つのイメージ・マップ定義を割り振ります。 MAP要素は、画像を読み込まないブラウザで表示されるリンクのメニューを含みます。

<OBJECT DATA="sitemap.png" USEMAP="#map" TYPE="image/png" TITLE="Site map" WIDTH=300 HEIGHT=200>
<OBJECT DATA="sitemap.gif" USEMAP="#map" TYPE="image/gif" TITLE="Site map" WIDTH=300 HEIGHT=200>
<MAP NAME=map>
<UL>
<LI><A HREF="/reference/" COORDS="5,5,95,195">HTML and CSS Reference</A></LI>
<LI><A HREF="/design/" COORDS="105,5,195,195">Design Guide</A></LI>
<LI><A HREF="/tools/" COORDS="205,5,295,195">Tools</A></LI>
</UL>
</MAP>
</OBJECT>
</OBJECT>

その他の情報