[61] イメージマップ（リンク領域）を作ろう map要素・area要素

今回から、他のコンテンツを埋め込むための要素 を使っていきます。
HTMLファイルの中に、画像・リンク領域・動画・音声などの、他のコンテンツを埋め込みます。HTMLファイルの中に、別のHTMLファイルを埋め込むことだってできます。
（初期の記事に登場した、画像を埋め込むための <img>要素 も、この仲間です）

今回の <map>要素・<area>要素は、埋め込むための要素とはちょっと違うけど、埋め込んだ画像の上に「リンク領域」を複数作るための要素です。

このように画像上に複数のリンク領域があるモノを「イメージマップ」（またはクリッカブルマップ）と言います。

イメージマップには「サーバーサイド・イメージマップ」と「クライアントサイド・イメージマップ」があり、ブラウザに依存するのが「クライアントサイド・イメージマップ」。
今回使うのはコレ。古くからあるモノなので、ほぼ全てのブラウザが対応しています。

ちなみに「サーバーサイド・イメージマップ」は、CGIなどのプログラムと一緒に使い、ブラウザに頼りません。ユーザがクリックした領域の座標を、サーバー上のプログラムが処理します。

「クライアントサイド・イメージマップ」は、<map>要素と<area>要素を使い、画像の表示には、<img>要素を使います。

★ <object>要素の usemap属性は HTML5.1で廃止になり、 <object>要素でイメージマップは使えなくなりました。<object>要素は次回紹介します。

イメージマップで 使用する要素	<map> 〜 </map> <area>（空要素。終了タグは不可）

画像の表示で 使用する要素	<img>（空要素。終了タグは不可）

<map>の属性	name：イメージマップの名前
	グローバル属性

<area>の属性 （一覧はこちら）	href	：リンク先のURL
	alt	：代替テキスト
	shape	：領域の形状（四角、円、多角形、画像全体）
	coords	：領域の座標を画像の左上を0としてピクセルで指定
	rel	：リンク先との関係を示すキーワード
	media	：リンク先の対象メディアタイプ
	target	：リンク先を表示するウィンドウ名またはキーワード
	hreflang	：リンク先の言語コード（jaとかenとか）
	type	：リンク先のMIMEタイプ（5.1で廃止扱い、5.2で復活）
	download	：href属性のファイルをダウンロードさせる
	ping	：ping送信するURL（W3C仕様では廃止扱い）
	referrerpolicy	：リンク先にアクセスする時のリファラーポリシーを指定
	グローバル属性

<img> で使う属性	usemap：<map>のname属性のイメージマップの名前を呼び出す

イメージマップを作ってみよう

W3C の仕様書のサンプル画像をそのまま使って説明します。
4つの図形にロールオーバーするとカーソルが変化し、リンク領域であることがわかります。
（リンク先はどれも、このページを指定しています）

これは画像を<img>要素で表示しています。

HTMLはこちら。img要素でのイメージマップです。

<p>
  <img src="shapes.gif" width="525" height="150" usemap="#shapes" alt="">
  <map name="shapes">
    <area shape=rect coords="50,50,100,100"> <!-- (赤い四角の真ん中の穴)  -->
    <area shape=rect coords="25,25,125,125" href="#" alt="Red">
    <area shape=circle coords="200,75,50" href="#" alt="Green">
    <area shape=poly coords="325,25,262,125,388,125" href="#" alt="Blue">
    <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"  href="#" alt="Yellow">
  </map>
</p>

イメージマップは「<map><area></map>」のカタチで使います。
<map>の name属性で付けた名前を、<img>の usemap属性でで呼び出していますね。
そして各領域の座標は、<aera>内で指定しています。
＊座標の指定は、下の「<area>要素での座標の指定のしかた」で解説します。

<area>要素での座標の指定のしかた

分かりやすいように、先ほどの画像ファイルにグリッドを付けてみました。
25ピクセルずつのグリッドです。

<area shape=rect coords="50,50,100,100"> <!-- (赤い四角の真ん中の穴) -->
<area shape=rect coords="25,25,125,125" href="#" alt="">
<area shape=circle coords="200,75,50" href="#" alt="">
<area shape=poly coords="325,25,262,125,388,125" href="#" alt="">
<area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"  href="#" alt="">

領域のカタチは「shape属性」で指定。
座標は「coords="数値,数値,数値…"」という具合で、数値を「,（カンマ）」で区切ります。
座標の基準は、画像の左上を0（x=0, y=0）とします。

●四角形の指定
四角形は「shape="rect"」で指定します。（引用符「" "」は省略してもOK）
座標は「左上のx座標」,「左上のy座標」,「右下のx座標」,「右下のy座標」の順に書きます。
上の例では、四角形の左上の角が x=50ピクセル、y=50で、右下の角は x=125、y=125なので
「coords="25,25,125,125"」となります。

上の例では、href属性の無い<area>を先頭に書いています。これはリンクの無い領域。赤い四角の穴（小さい四角）の部分です。
<area shape=rect coords="50,50,100,100">
このように<area>でリンクの無い領域も指定できます。

●円の指定
円（正円）は「shape="circle"」で指定します。（引用符「" "」は省略してもOK）
座標は「中心点のx座標」,「中心点のy座標」,「半径」の順に書きます。
上の例では、中心点は x=200、y=75で、半径=50で、「coords="200,75,50"」となります。

●多角形の指定
四角形と正円以外は「多角形」で指定します。
多角形は「shape="poly"」で指定します。（引用符「" "」は省略してもOK）
座標は「角のx座標」,「角のy座標」の順で、全部の角をつなげて書いていきます。
角の座標を書く順番は、時計回りでも半時計回りでも、どっちでもOK。
最初に書く角も、どこから始めても良いんです。
角を飛ばしたりしないで、一筆書きのようにつなげて書けばOKです。
上の三角形の例では、いちばん上の角（x=325、y=25）から半時計回りに角を書いていますので、
「coords="325,25,262,125,388,125"」となっています。

●defaultの指定
上の例にはありませんが「shape="default"」と指定すると、画像全体がリンク領域になります。

上のように、他のシェイプの領域を作って、「shape="default"」も併用すれば、
各シェイプのリンク領域と「それ以外の領域」のリンク領域を default で作ることができます。
（背景部分にもリンクが貼れるってことですね。）

イメージマップのロールオーバーでの変化は JavaScript を使います

イメージマップって、昔はよく使ったのですが、CSSを使った画像の集合のほうが便利なので、最近はあまり使わなくなりました。SEO的にも、イメージマップはあまりヨロシクナイそうです。

ただし、地図で各地域をクリックするようなメニューには、イメージマップで作るのが最適です。（参考サイト：「全国10万件以上のお医者さんガイド」）

地図以外でも、集合写真で人の顔のロールオーバーで紹介文が出るメニューなど、イメージマップが適しているモノはいろいろあります。

ただ、イメージマップは CSSだけではロールオーバーの変化を実現できない
のが難点です。<area>要素は<a>と似てるけど、「area:hover」というセレクタを作っても何も起こりません。
ロールオーバーで見た目を変化させるには、JavaScript を使う必要があります。
（＊先ほど例にあげた「お医者さんガイド」は jQuery を使っています。 jQuery を使う方法は後ほど紹介します）

まず、シンプルな JavaScript を使ってロールオーバーで変化させる方法を紹介します。
下の画像をロールオーバーしてください。丸、四角、三角の部分が変化します。

ソースはこちら

<script>
OnMouse = new Array();    /*配列でsample0.gif 〜 sample3.gif までの4個の画像を選べるようにしています*/
    for(i = 0; i < 4; i++) {
    OnMouse[i] = new Image();
    OnMouse[i].src = "sample" + i + ".gif"
    }
function cImg(flag) {    /*関数cImg の「flag」の数字を変えれば、適切な画像を選べるようにしています*/
    var imgEle = document.getElementById('imgmap');    /*<img>要素に付けたIDで呼び出しています*/
    imgEle.src = OnMouse[flag].src;
    return false;
}
</script>

<p>
<img id="imgmap" src="sample0.gif" width="600" height="130" usemap="#shapes3">
<map name="shapes3">
<area shape=circle coords="165,53,50" href="#ttl_3" alt="Lunch Set"
 onMouseOver="cImg(1)" onMouseOut="cImg(0)" onClick="cImg(0)">
<area shape=rect coords="295,13,395,113" href="#ttl_3" alt="Drink Menu"
 onMouseOver="cImg(2)" onMouseOut="cImg(0)" onClick="cImg(0)">
<area shape=poly coords="495,114,568,27,455,7" href="#ttl_3" alt="Sweets"
 onMouseOver="cImg(3)" onMouseOut="cImg(0)" onClick="cImg(0)">
</map>
</p>

このサンプルは、4つの画像を用意しています。
平常時の sample0.gif と、ロールオーバー時の3つのgif画像です。
sample0.gif（平常時）
sample1.gif（オレンジの円を強調）
sample2.gif（緑の四角形を強調）
sample3.gif（ブルーの三角形を強調）

この方法だと、リンクの数だけ画像を用意しなければなりません。
上の例のように少なければイイけど、けっこうリンク数がある時には何十枚も用意するハメに。
そんなときは jQuery のプラグイン「ImageMapster」がラク。↓

jQuery の「ImageMapster」を使ってみよう

今回使用するプラグイン「ImageMapster」は、James Treworgy氏作で、MIT License （再配布時はの著作権表示+無保証が条件）です。

この「ImageMapster」で、作ってみたのがコチラ。
（クリックで別ウィンドウで開きます）

何といっても、プラグインで自動的にリンク領域を切り抜いてくれるので、画像を最低2枚（平常時のとロールオーバー時のと）用意するだけなのが強みです。

設定も、<area>にキーワードを決めてやるだけなので、とっても簡単です。（使い方はサンプル上に詳細）

<area>の属性一覧

最後に、<area>要素の属性をまとめました。

href="URL"

リンク先のURL。

alt="代替テキスト"

代替のテキスト。イメージマップが表示されない場合に必要。
当然のことですが、<area>要素に「href属性」がない場合、領域は選択できないので「alt属性」は省略する必要があります（HTML5.2仕様）

shape="rect"（または「circle」「poly」「default」）

rect は四角形、circle は円、poly は多角形（polyはpolygonの略）、
default は、画像全体（rect, circle, polyなどで指定した領域以外の場所）

coords="領域の座標（画像の左上を0としてピクセルで指定）"

rect の場合、四角形の「左上のx」,「左上のy」,「右下のx」,「右下のy」
circle の場合、円の「中心のx」,「中心のy」,「半径」
poly の場合、「最初の角のx」,「そのy」,　以降、すべての角のxy座標
default は、coords属性指定不可

<area shape=rect coords="25,25,125,125" href="rect.html" alt="四角">
<area shape=circle coords="200,75,50" href="circle.html" alt="円">
<area shape=poly coords="325,25,262,125,388,125" href="poly.html" alt="三角">

rel="関係を示すキーワード"

このHTML文書とリンク先ファイルの関係（relation）を示すキーワードを指定。
rel属性のキーワードはこちら↓

• alternate =代替え文書
  ( hreflang属性との併用で翻訳版を、media属性との併用で別メディア版を示す)
• search =検索ページを示す
• help =ヘルプ
• prev =前へ
• next =次へ
• prefetch =リンク先を事前に読み込む
• bookmark =パーマリンク
• tag =タグ
• license =著作権
• author =作者

<area shape=rect coords="25,25,125,125" href="rect.html" alt="四角" 
   rel="alternate" hreflang="en">English version</a>

media="リンク先を表示する時のメディア（機器）タイプ"

初期値は all。「 , （カンマ）」で区切って複数指定可能。
メディアタイプはこちら↓

• all =すべての機器
• screen =パソコンのスクリーン画面
• tv =テレビ画面
• handheld =携帯電話などの端末
• print =プリンタ
• projection =プロジェクタ
• tty =文字幅が固定された機器（テレタイプなど）
• braille =点字ディスプレイなど
• aural =音声出力機器

<area shape=rect coords="25,25,125,125" href="rect.html" alt="四角" 
   media="handheld">

target="_blank"（または「_self 」「_parent 」「_top」「ウィンドウ(フレーム)名」）

リンク先ファイルを表示するウィンドウ（またはフレーム）を指定します。

• _blank ：新規の（別の）ウィンドウに表示します
• _self： 現在の（同じ）ウィンドウ（フレーム）に表示
• _parent：親になるウィンドウ（フレーム）に表示
• _top：フレームを解除してウィンドウ全体に表示
• ウィンドウ(フレーム)名：その名前のウィンドウ（フレーム）に表示

hreflang="言語コード"

リンク先ファイルの言語コードを指定。
ja (日本語), en (英語), es (スペイン語), fr (フランス語), ko (韓国語), zh (中国語) など。
その他は「ISO 639：言語名コード一覧」参照に。

type="MIMEタイプ"

リンク先ファイルのMIMEタイプを指定。text/html（HTML）, application/pdf（PDF）など。「ちょっとメモ：MIMEタイプ」を参照に。
＊<area>要素の type属性は、HTML5.1 で一度廃止扱いになりましたが、5.2 で再び仕様に載っています。

download または download="ファイル名"

リンク先ファイルをダウンロードさせる。同オリジンのファイルのみダウンロード可。
ダウンロードさせるだけなら値は省略でOK。ダウンロードさせたファイル名を変更する時はそのファイル名を値にする。

<area shape=rect coords="25,25,125,125" href="dl_image1.png" alt="ダウンロード1" 
  download="download-image-1.png">

ping="pingを送信するURL（半角スペース区切りで複数可）

ping（ピン）を送信する pingサーバ（pingサイト）のURLを指定。
半角スペースで区切ると複数のURLを指定できる。

<area shape=rect coords="25,25,125,125" href="rect.html" alt="四角" 
  ping="http://blogsearch.google.com/ping http://r.hatena.ne.jp/rpc">

＊<area>要素の ping属性は、W3Cの仕様では廃止扱いですが、WHATWGの仕様ではイキてます。

referrerpolicy="キーワード"

リンク先にアクセスする時のリファラーポリシーを指定。 リファラーとはウェブ上のページにリンクしているページのアドレス。コレを参照することで「どこからリクエストが来たか」わかる。
リファラーポリシーとは、このリファラーを送信するかどうかの指定。
referrerpolicy="no-referrer-when-downgrade"がブラウザデフォルトで「httpsからhttpにはリファラーを送らない」
その他のキーワードはこちら→Referrer Policy (Editor’s Draft, 20 April 2017) W3C

このほかグローバル属性も使います

id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

次回予告

次回は、外部コンテンツをHTML上に埋め込む要素、<object>です。
<object>は、画像・動画・音声・別のHTMLやPDFなどの、
いろいろな種類のファイルを埋め込むことができます。