<map> - クリッカブルマップ

2009.12.11

構文

<div>
  <map>
    <area>
      ：
  </map>
</div>

説明文

　<map>タグは，クリッカブル・マップの設定を行う。クリッカブル・マップとはひとつのイメージ上のクリックする場所によって別のリンク先にジャンプする機能である。

　クリッカブル・マップに利用する画像は，<img>タグを利用して表示する。その際，「usemap」属性に任意の名前を付けておく。名前の前には必ず「#」を付加する。クリッカブル・マップの設定には<map>タグをする。その際，「name」属性に<img>タグの「usemap」属性に指定した名前を指定する。この際，先頭の「#」は付けない。

　各エリアおよびリンク先の指定には<area>タブを利用する。詳しい設定方法については<area>を参照。

サンプル

HTMLソース

<div>
<img src="map.gif" alt="画像" usemap="#linkmap" 
  border="0" width="243" height="68">
<map name="linkmap">
  <area shape="rect" coords="11,16,63,54"
    alt="ITpro" href="http://itpro.nikkeibp.co.jp/">
  <area shape="poly" coords="73,50,159,50,159,24,73,9"
    alt="Nikkei Linux" href="http://itpro.nikkeibp.co.jp/linux/">
  <area shape="circle" coords="197,32,28"
    alt="Nikkei BP net" href="http://www.nikkeibp.co.jp/">
  <area shape="default"
    alt="Nikkei Linux" href="http://itpro.nikkeibp.co.jp/linux/">
</map>
</div>

ブラウザ表示例

対応状況

HTML			IE		Firefox		Opera
4 strict	4 Transitional	5	6	7	2	3	8	9
○	○	○	○	○	○	○	○	○

要素，タグ

タグ要素	インライン要素
包括可能要素	ブロック要素，<area>（いずれか必須）
タグ記述条件	開始タグ：必須　終了タグ：必須

属性

よく利用する属性

属性	意味	対応
属性	意味	HTML 4s	HTML 4t	その他
name=名前	<img>や<area>などのクリカッブルマップに関連するタグとの連携をとるための名前を指定する	○	○

その他の属性

属性	意味	対応
属性	意味	HTML 4s	HTML 4t	その他
class=クラス名	このタグのクラス名。CSSでスタイルを指定する場合などに利用される	○	○
dir=方向	タグ内の文字の表示方向。「ltr」を指定すると文字を左から右に，rtlを指定すると「右から左」に表示する。しかし，多くのWebブラウザでは，文字コードを自動判別し，自動的に表示方向を決定している。そのため，日本語を「rtl」と指定しても実際には左から右に表示される。強制的に並び替えを行いたい場合は<bdo>タグを利用する	○	○
id=ID	タグのID。ダイナミックHTMLでタグを操作する場合や，Java Scriptでのタグの制御，個別にスタイルを指定する場合などに利用する	○	○
lang=言語	タグ内に記述した言語。例えば，日本語の場合は「ja」，英語の場合は「en」を指定する	○	○
style=スタイル	タグのスタイル。スタイルの指定方法については「CSSの基本 (2) CSSの記述位置」を参照	○	○
title=タイトル	タグのタイトル。一般的にタグの補足情報を記述する。一般的なWebブラウザでは，タグ上にマウス・ポインタを乗せるとツール・チップにtitle属性に指定した内容を表示する	○	○

マウスやキーボードの状況変化に関わる属性

属性	意味	対応
属性	意味	HTML 4s	HTML 4t	その他
onclick=スクリプト	このタグに対応する表示結果にマウスの左ボタンをクリックした場合に，指定したスクリプトを実行する	○	○
ondblclick=スクリプト	このタグに対応する表示結果にマウスの左ボタンをダブル・クリックした場合に，指定したスクリプトを実行する	○	○
onmousedown=スクリプト	このタグに対応する表示結果にマウスのボタンで押下した場合に，指定したスクリプトを実行する	○	○
onmouseup=スクリプト	このタグに対応する表示結果にマウスのボタンを離した場合に，指定したスクリプトを実行する	○	○
onmouseover=スクリプト	このタグに対応する表示結果にマウス・ポインタが乗った場合に，指定したスクリプトを実行する	○	○
onmousemove=スクリプト	このタグに対応する表示結果上でマウス・ポインタが動いた場合に，指定したスクリプトを実行する	○	○
onmouseout=スクリプト	このタグに対応する表示結果にマウス・ポインタが外れた場合に，指定したスクリプトを実行する	○	○
onkeypress=スクリプト	このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下して離した場合に，指定したスクリプトを実行する	○	○
onkeydown=スクリプト	このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下した場合に，指定したスクリプトを実行する	○	○
onkeyup=スクリプト	このタグに対応する表示結果にフォーカスした状態で，キーボードのキーから離した場合に，指定したスクリプトを実行する	○	○