画像の特定の場所へのリンク
一般的なリンクの貼り方は「他のページへのリンク方法」で学びました。
そこでは１つの画像全体にリンクを貼ることができるということも述べましたが、
このページでは1つの画像の一部にリンクを貼るという方法について説明します。
これは1つの画像に複数のリンクを貼ることができる方法でもあります。
（１）画像の特定の場所にリンクを貼ろう
特定の部分のみにリンクを貼るためには、新しいタグを必要とします。
例：
画像内の「Ｅｎｔｅｒ」をクリックすると、サイトのトップページに飛ぶようになっています。
このHTML構文を次に載せます。
<html><head><title>画像の特定の場所へのリンク</title></head><body><img src="./lib/subimg1.gif" alt="トップ画像" usemap="#top"><map name="top"><area shape="rect" coords="120,120,210,155" href="./"></map></body></html>
（２）タグの説明
img要素、map要素、area要素を組み合わせることで、イメージマップを設定することができます。
※イメージマップとは、1つの画像内に複数のリンク先を設定できる機能のことです。
<area>タグ内で指定する値が厄介です。
まず画像を貼るときに使う<img>タグの中で、usemap="#○○○"として○○○に任意のマップ名（半角英数字）を代入します。
次に<map name="○○○">として、○○○に先ほどの名前を入れます。
<area shape="rect" coords="120,120,210,155" href="./">
まずshapeですが、これはリンクを指定する範囲の形を意味します。
指定できるのはcircle、rect、poly、defaultの4つの値で、それぞれの値が意味するものは、円、四角形、多角形、画像全体となります。
| circle | 円 |
| rect | 四角形 |
| poly | 多角形 |
| default | 画像全体 |
defaultの場合は普通にリンクを貼るため、まず用いないでしょう。
次のcoordsで画像の範囲を座標軸の考え方を元に指定していきます。
これはshapeで指定した形によって、それぞれ指定の仕方が変わります。
指定する値を一覧にして見ました。次の表を見てください。
| Ｓｈａｐｅ | 指定する値 |
|---|---|
| circle | 中心のX座標、中心のY座標、半径 |
| rect | 左上のX座標、左上のY座標、右下のX座標、右下のY座標 |
| poly | 全ての角の頂点のX座標とY座標 |
以上の値を半角カンマで仕切り、画像の左上の座標を(0,0)と考えて指定してください。
例ではrectをshapeにしているので、四角形の左上の頂点のX座標、Y座標、そして右下の頂点のX座標、Y座標の順番に指定していして、四角形の大きさを指定しています。
複数のリンク指定する場合はこの<area>をその数だけ指定してください。
ここまで指定したら、</map>で閉じてあげれば完成になります。
（３）座標の割り出し方
画像を編集できるソフトがあれば割り出すことができます。Windowsの場合は、「ペイント」ツールで座標を調べることが可能です。
いかがでしたでしょうか？これは大きな画像を用いてレイアウトを考えるときに有効です。
多少難しいですが、うまく活用すれば画像をより効果的に使えることになります。
オススメ書籍
HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。
