イメージマップ

次に紹介するのはイメージマップです。

これは画像と関係するもので、画像というのは一般的に長方形ですね。ここで、a要素を用いて画像にハイパーリンクをつける場合（画像をクリックすると移動するようにする場合）、その画像のどこをクリックしても移動するのが普通です。

ところがイメージマップを使ってリンクを作ると、画像の特定の部分だけにリンクを適用させることができます。

イメージマップを表す要素はmap要素です。そして、img要素側では、usemap属性という属性を使ってmap要素と結びつけます。

usemap属性は、最初に"#"があり、次にmap要素の名前という書式です。名前というのは、id属性またはname属性です。具体的なサンプルはあとで紹介するとして、まずmap要素の書き方を見ていきます。

map要素の中には、いくつかのarea要素が書かれます。具体的に領域を決定するのはarea要素です。

そして、area要素1つで1つの領域を表し、その領域にリンク先が割り当てられます。つまり、複数のarea要素を用いれば、1つの画像で場所によって複数のリンク先が可能というわけです。

まず、shape属性で、そのarea要素がどんな形かを指定します。"circle"（円形）、"rect"（矩形）、"poly"（多角形）、"default"（全体）があります。

矩形とは、要するに長方形のことです。また、default属性は、その画像全体ということです。どういうときに使われるかというと、画像の一部の領域には特定のページへのリンクを用意しておきながら、それ以外の場所をクリックすると別の場所へ…という場合に使えます。shape属性が省略された場合、"rect"の動作になります。

そして具体的な形を決定するのはcoords属性です。shape属性によって、coords属性に何を書けばいいか変わってきます。

circleの場合

円の場合、「中心座標」と「半径」によって決まります。単位は全てピクセルで、座標は左上が(0, 0)で、右・下に行くほど大きくなるので注意しましょう。

coords属性には、3つの値を,（コンマ）で区切って書きます。中心のx座標、中心のy座標、半径です。例えば、(20,30)の位置に中心があり、半径が10の円の場合、coords="20,30,10"となります。

rectの場合

矩形の場合、「左上の座標」と「右下の座標」によって決まります。ですから、左上x座標、左上y座標、右下x座標、右下y座標の順に4つの値を書きます。

例えば、左上が(10,20)で右下が(100,200)の場合は、coords="10,20,100,200"となります。

polyの場合

多角形とは、つまり任意の形なので、頂点を1つずつ列挙していきます。x座標、y座標の順でひたすら書くことになります。

例えば、(0,50),(100,0),(100,100)の3つの頂点をもつ三角形の場合、coords="0,50,100,0,100,100"となります。

defaultの場合

画面全体を表すので、coords属性は使いません。

リンクに関連する属性

area要素はハイパーリンクを作りますから、それ関連の属性もあります。これはa要素と共通のことも多いので参考にしましょう。

href属性,target属性,rel属性,media属性,hreflang属性,type属性はa要素と同様です。

また、area要素はalt属性が必須です。画像を部分ごとに分けて各部分に別のリンクを割り当てるのですから、それぞれに代替テキストが必要だろうということです。また、area要素は空要素です。

サンプル

それではサンプルです。次の画像を見て下さい。

丸の部分はGoogle,四角はYahoo!へのリンクになっています。これは次のように書かれています。

<p><img src="6_9_map.svg" alt="サンプル画像" width="200" height="200" usemap="#samplemap"></p>
<map name="samplemap">
  <area shape="circle" coords="50,50,50" href="http://google.com/" alt="丸">
  <area shape="rect" coords="100,100,200,200" href="http://yahoo.co.jp/" alt="四角">
</map>

まずもととなるimg要素があり、usemap="#samplemap"と書かれています。samplemapというのは、下に書いてあるmap要素のname属性と同じです。このようにして、img要素とmap要素を関連付けています。

また、一つのmap要素を使い回して、複数のimgと関連付けることも可能です。

さて、map要素の中には2つのarea要素があります。shape属性を見て分かる通り、片方が丸で片方が四角です。これはいいですね。

画像の大きさは200x200で、左上の丸は中心が(50,50)で半径が50です。右下の四角は左上が(100,100)で右下が(200,200)です。

では、次のサンプルを見てみましょう。

丸がドーナツのように穴あきになりました。しかも、その穴の部分をクリックしても何も起きません。

これはいったいどうなっているのかというと、こうなっています。

<p><img src="6_9_map2.svg" alt="サンプル画像2" width="200" height="200" usemap="#samplemap2"></p>
<map name="samplemap2">
  <area shape="circle" coords="50,50,30">
  <area shape="circle" coords="50,50,50" href="http://google.com/" alt="丸">
  <area shape="rect" coords="100,100,200,200" href="http://yahoo.co.jp/" alt="四角">
</map>

前と違うのは、画像が違う（穴が空いた画像に変えました）点と、area要素が1つ加えられている点です。

このarea要素は、href要素・alt要素がありません。href要素がないarea要素は、「クリックしても何も起こらない領域」を表します。

つまり、まず丸全体にGoogleへのリンクを表す丸い領域を作っておいて、その上にhref要素がない小さな丸（穴の部分）をかぶせてやればいいのです。

これを実践しているのが上のサンプルです。新しく追加されたhref属性のないarea要素は、中心が(50,50)でGoogleの丸と同じで、半径が30と小さいです。

ここで「上にかぶせる」と言いましたが、どれが上になるかはarea要素の順番によって決まります。実は、先に書いてあるarea要素ほど上にくるのです。したがって、さっきのサンプルで、丸のarea要素の順番を変えると穴があかなくなったりします。

また、type="default"（画像全体）を紹介しましたが、これは一番後ろに置かないと、別のarea要素の上にかぶさってしまい意味がなくなります。注意しましょう。