map要素（image map, clickable map）は area要素や a要素 を内包して、img要素, input要素, object要素で埋め込まれている画像と連携してクライアントサイド・イメージマップ（クリッカブルマップとも呼ばれる）を作成します。
a要素に対してイメージマップを構成する shape属性, coords属性を指定する場合には、インライン要素である map要素に特別にブロック要素を内包することができます。なお、イメージマップには a要素を使うか、area要素を使うかで、UA の対応状況に大きな開きがあります。現状では a要素の shape属性, coords属性に対応しているのは、Macintosh版Internet Explorer 5, Netscape 7 以上, Firefox 1 以上, Opera 7 以上のみ（Windows版Internet Explorer 6, Windows版Internet Explorer 7, Safari は無効）です。a要素に対して area要素で作るイメージマップの対応状況は良好ですが、こちらも検索エンジンのロボットが area要素の href属性に指定されたリンク先を巡回できないという欠点があります。
a要素でクライアントサイド・イメージマップを作成する場合、HTML4.01 strict, XHTML1.0 strict, XHTML1.1 では map要素の直下に area要素以外のインライン要素を置くことができないため、必ず直接の子要素には p要素や div要素などのブロック要素を1つ以上内包しなければなりません。このように map要素はブロックレベル・インラインレベルの両方を取ることができる要素型に分類されます。ただし、area要素を使用する場合はインライン要素として扱われます。
クライアントサイド・イメージマップに名前を指定します。name属性の値は半角アルファベットの大文字・小文字を区別する（case-sensitive）ので厳密な指定が必要です。map要素につけた名前は img要素, input要素, object要素に指定されている usemap属性の値を参照して連携します。なお、XHTML1.1 では name属性は完全に廃止され、代わりに id属性を指定します。XHTML1.0 では id属性を参照できない UA との後方互換のために id属性と name属性の両方を同じ値で設定することが認められています。
<img src="イメージファイルのURI" alt="代替テキスト" usemap="#マップ名称" width="横幅" height="高さ"> <map name="マップ名称"> <area shape="rect" coords="20,20,60,70" href="リンク先のURI" alt="代替テキスト"> <area shape="circle" coords="90,30,20" href="リンク先のURI" alt="代替テキスト"> <area shape="poly" coords="120,30,140,80,160,30,140,40" href="リンク先のURI" alt="代替テキスト"> </map>
1枚の画像に複数のリンク先を指定できるイメージマップ（Image Map）の作成方法を解説します。なお、イメージマップには、CGI を利用したサーバサイド・イメージマップと map要素で作成するクライアントサイド・イメージマップの2種類があり、ここではクライアントサイド方式のイメージマップを紹介します。
イメージマップはクリッカブルマップ（Clickable Map）とも呼ばれ、1枚の画像の中に色々なリンク先を設定しておき、クリックした位置に応じて指定のリンク先にジャンプする機能です。1枚の画像の中に複数のリンク先を設定できることから、たとえば日本地図の画像を利用して、各都道府県の領域をクリックすると、その詳細なページへ移動するなど応用範囲が広く、Yahoo! JAPAN のトップページでも使用されている人気のある機能です。
img要素の usemap属性は src属性で指定した画像ファイルに適用するマップ設定の名称を指定する属性です。usemap属性の値は map要素の name属性で指定した値になり、マップ名称の文頭にハッシュ（#）を前置して、usemap="#マップ名称" の形で指定します。map要素はイメージマップを定義する要素で、イメージマップの定義全体を map要素で囲みます。name属性は map要素で定義するイメージマップの名称を指定します。この名称を img要素の usemap属性に指定することで、その画像に map要素内で定義された指定が適用されます。area要素は map要素の中で使用して、img要素で指定された画像にリンク先を指定します。area要素は内容をもたない空要素で終了タグがありません。area要素を複数記述することで、複数のリンク先を設定できます。area要素の shape属性は画像にリンクを設定する際の形状を指定し、coords属性が、その領域を座標値で指定します。指定する座標値のポイントは、リンクの形状によっても異なります。shape属性の値には "rect", "circle", "poly" の3種類の形状があり、それぞれ次のようなポイント座標値を coords属性で指定します。
coords="（左上の）x,（左上の）y,（右下の）x,（右下の）y"coords="（円の中心の）x,（円の中心の）y,（円の半径）r"coords="（頂点1の）x,（頂点1の）y,（頂点2の）x,（頂点2の）y,…"coords属性の設定は shape属性で指定された形状によって変わります。shape属性の値に矩形の "rect" を指定した場合は、「左上のx座標,左上のy座標,右下のx座標,右下のy座標」の4点を指定します。円形の "circle" を指定した場合は、「円の中心のx座標,円の中心のy座標,半径r」を指定します。多角形の "poly" を指定した場合は、画像の左上（0 , 0）を原点に多角形の各頂点となる「x座標,y座標」をいくつも並べて指定します。area要素の alt属性は img要素の alt属性と同じで、画像のもつ情報の代替テキスト（altanative text）を指定します。代替テキストとは何らかのトラブルで画像が表示できない場合や音声出力・点字出力などの非視覚環境、画像の表示に対応していない・あるいは表示しない設定にしている環境において、その画像の表現する情報の代替となる文章のことです。なお、この場合の area要素はリンクとして機能するため、代替テキストには通常のアンカーを指定する場合と同じようにリンク先の内容を記述するのが良いでしょう。area要素の href属性に指定されたリンク先を巡回することができません。このため重要なナビゲーション部分にイメージマップを使用することはできるだけ避けた方が無難なようです。なお、area要素の代わりに検索エンジンのロボットが巡回できる a要素でもイメージマップは作成可能ですが、Macintosh版Internet Explorer 5, Netscape 7 以上, Firefox 1 以上, Opera 7 以上しか対応していないため（Windows版Internet Explorer 6, Windows版Internet Explorer 7, Safari では無効）、area要素に比べると極端にサポートが落ちます。さらに a要素は、内容をもたない area要素とは違い、終了タグも必須のためアンカー内容をもったリンクボタンが表示され、どうしても見た目が悪くなってしまう欠点があります。area要素に代わって a要素に shape属性と coords属性を指定したサンプルを用意しました。まず、a要素に shape属性と coords属性を指定する場合は、map要素には特別にブロック要素を内容にしなければなりません。また、a要素は空要素ではなく、リンク先の情報となる内容をもたなければならないため、画像の横にはリンクボタンが並び、見た目はどうしても悪くなります。そこで、map要素の内容となっているブロック要素を対象に CSS の text-indentプロパティに極端な負の値（例："text-indent : -9999px ;" など）を指定することでアンカーテキストは表示域から見えなくなり一応は見た目を整えることができるでしょう。ただし、辛うじてアンカー内容をリンクボタンとして機能することができていた Windows版Internet Explorer 6, Windows版Internet Explorer 7, Safari では全く動作しないことになります。
<img src="イメージファイルのURI" alt="代替テキスト" usemap="#マップ名称" height="イメージの横幅" width="イメージの高さ"> <map name="マップ名称"><p> <a shape="rect" coords="20,20,60,70" href="リンク先のURI">リンク先の内容</a> <a shape="circle" coords="90,30,20" href="リンク先のURI">リンク先の内容</a> <a shape="poly" coords="120,30,140,80,160,30,140,40" href="リンク先のURI">リンク先の内容</a> </p></map>
XHTML1.1 では name属性は完全廃止されたため、img要素, input要素, object要素で埋め込まれているイメージとの関連付けには id属性のみを使用します。
http://w3g.jp/xhtml/dic/map実績：大阪学院 入試サイト New! / 三田市民病院 / 神戸女学院大学 入試サイト / 釣りサンデー