【HTML】画像のリンク領域を設定するイメージマップを作るmap要素

画像内の特定のところをクリックすると指定したリンク先ページに移動する仕組みです。このイメージマップを作るにはmap要素と、その要素内にimg要素、area要素とa要素の組み合わせで行います。

イメージマップを作る手順

まずイメージマップ用として使われる画像をimg要素で指定します。要素内にusemap属性を使ってイメージマップの名前(map要素内のname属性の名前)も指定します。

 <img src="japanmap.jpg" alt="イメージマップ" usemap="#map1">

次にname属性とarea要素を使ってイメージ領域のリンク先を指定します。

「name」属性： <map name="イメージマップ名">～</map>
イメージマップに名前を付けます。XHTMLではname属性の代わりにid属性が使えます。

 <map name="map1">
  <area nohref alt="福岡" shape="rect" coords="93,351,123,376">
  <area nohref alt="広島" shape="rect" coords="134,330,170,356">
  <area nohref alt="大阪" shape="rect" coords="206,324,237,349">
  <area nohref alt="名古屋" shape="rect" coords="245,317,291,338">
  <area nohref alt="東京" shape="rect" coords="298,294,327,323">
  <area nohref alt="札幌" shape="rect" coords="329,87,362,116">
 </map>

object要素とa要素を使ってイメージマップ作成

下記のように、img要素の代わりにobject要素を、area要素の代わりにa要素を使って領域とリンク先を指定して同様の効果が得られます。ただし、一部のブラウザではサポートしてないようです。

 <object data="japanmap.jpg" type="image/jpg" usemap="#map1">
 <map name="map1">
  <a href="hukuoka.html" shape="rect" coords="93,351,123,376">福岡</a>
  <a href="hiroshima.html" shape="rect" coords="134,330,170,356">広島</a>
  <a href="osak.html" shape="rect" coords="206,324,237,349">大阪</a>
  <a href="nagoya.html" shape="rect" coords="245,317,291,338">名古屋</a>
  <a href="tokyo.html" shape="rect" coords="298,294,327,323">東京</a>
  <a href="saporo.html" shape="rect" coords="329,87,362,116">札幌</a>
 </map>

「map」要素の指定可能な属性

共通属性	「id」・「class」・「style」・「title」・「lang」・「dir」
イベント属性	「onclick」・「ondblclick」・「onmouseover」・「onmouseout」・「onmousedown」・「onmousemove」・「onmouseup」・「onkeydown」・「onkeypress」・「onkeyup」