初級篇★ページ作りの基礎知識1. HTMLを書いてみよう

VOL8.イメージマップの設定と設置

１枚の画像にリンクを貼る方法は既にお話しましたが、画像の一部にリンクを付けることも出来ます。これは「イメージマップ」といって、１枚の画像の一部を円形や四角、多角形に切り取り、それぞれに別のリンクを貼る方法です。こうすると一枚の画像の中に、いくつものリンクを並べて設置することが出来ます。

これには、イメージマップを設置する画像の<img src=...>というスクリプトの直前に、以下のように<map name="...">〜</map>を書き加えます。

<map name="任意の名前">

<area shape="rect (circle, poly)" coords="図形の座標" href="リンク先URＬ（orパス）" alt="代替テキスト">

</map>

<img src="画像ファイル名" usemap="#<map name...>で設定した任意の名前">... イメージマップを設置する画像

実際に設定される内容は、それぞれ以下の通りです。

<map name="任意の名前"> ... 設定するイメージマップに適当な名前を付けます。

<area shape="図形の形"> ... 設定する図形の形を決めます

・rect ... 四角形

・circle ... 円形

・poly ... 多角形

<coords="図形の座標">... 各図形の座標設定方法は↓を参照して下さい。

<href="リンク先URL">... ジャンプするリンク先のURLか相対パスを記入します。

<alt="代替テキスト">... マウスポイント時に表示される代替テキストを画像に付けるのと同様に、１枚の画像の中でも各図形に個別に付けることができます。

なお、画像本体には、先に任意の名前を付けたイメージマップが設置されることを示すために、<img src...>タグ内に、 

usemap="#<map name...>で設定した任意の名前"　を書き加えておきます。この時、名前の前に#を付けることをお忘れなく。

各図形の座標設定方法は以下の通りです。これらの例には皆、それぞれの図形にリンクを付けていますので、図形の中にマウスをポイントしてクリックするとリンク先へジャンプすることが出来ますが、それ以外の場所ではクリックしても動作しません。

�T.四角に切り取る ... <area shape="rect">

図に示したa, b, c, d の長さを、coords="a, b, c, d" と、順に書き込みます。この数値単位はピクセルで、本体画像の左上の角を０基点として、設定する四角の左上と右下の角を示す座標になっています。

a, b ... 左上の角を示す座標

c, d ... 右下の角を示す座標

この図のスクリプトは以下の通りです。

<map name="imagemap1">

<area shape="rect" coords="a, b, c, d" href="imagemap_sumple1.htm"></map>

<img src="hpvol8_imagemap1.jpg" usemap="#imagemap1">

�U.円形に切り取る ... <area shape="circle">

画像本体の左上を０基点として円の中心点がある座標（a, b）と、円の半径（c）を、coords="a, b, c"の順で示します。なお座標を示す値aは、基点から横の長さ、bは基点から縦の長さとなります。この図のスクリプトは以下のようになっています。

<map name="imagemap2">

<area shape="circle" coords="a, b, c" href="imagemap_sumple2.htm"></map>

<img src="hpvol8_imagemap2.jpg" usemap="#imagemap2">

�V.多角形に切り取る ... <area shape="poly">

多角形は、同じく画像本体の左上を０基点として、それぞれの角がある座標を隣接順に、coords="a, b, c, d, e, f, g, h, i, j, a, b"の順で示します。一回りしたら最後はもう一度最初の点の座標(a, b)で閉めます。なお、この場合も座標を示す値aは、基点から横の長さ、bは基点から縦の長さとなります。それぞれの角も、この要領で値を決めて下さい。三角形から何角形まででも、この要領で指定することが出来ます。この図のスクリプトは以下の通りです。

<map name="imagemap3">

<area shape="poly" coords="a, b, c, d, e, f, g, h, i, j, a, b" href="imagemap_sumple2.htm"></map>

<img src="hpvol8_imagemap3.jpg" usemap="#imagemap3">

図形は以上のようにして設定するわけですが、<area shape...>の部分を複数作ることにより、一枚の画像の中で、いろいろな形の図形を並べて切り取ることが出来ます。以下はうちのファビ３兄弟の写真ですが、それぞれのファビをマウスでポイントすると別々のテキストが表示され、リンク先ページのヒントを与えます。クリックすると、それぞれのリンク先にジャンプすることが出来ます。

このスクリプトは、以下のようになっています。

<map name="furbies"> 

<area href="../furby/story3.htm" alt="ひなちゃんの愛車" shape="rect" coords="33, 67, 171, 294"> 
<area href="../furby/nana_oheya.htm" alt="ななのお部屋" shape="rect" coords="178, 21, 296, 158"> 
<area href="../furby/haruna_oheya.htm" alt="はるなのお部屋" shape="rect" coords="226, 166, 424, 308">

</map>

<img src="../furby/cards/cards3/o15_49postw.jpg" usemap="#furbies">

利用方法としては、例えば旅行記などで行った先の地図を本体画像とし、各観光スポットを図形で切り取って、それぞれにその観光地で撮った写真に解説を添えたページを作ってリンクするようにするとか、飼っているペットが何匹かいれば、みんなが写っている写真を本体画像として、それぞれの成長記録へのリンクを設定するとか、工夫次第で凝った使い方が出来ると思います。

なおイメージマップにおけるそれぞれの図形は、Front Page では「ホットスポット」と呼ばれ、この機能を使うと座標を簡単に設定できます。Front Page での設定方法は以下の通りです。

１．画像をクリックして選択し、画像ツールボタンの中から四角、円形、多角形のどれかをクリックして選びます。

２．画像上でマウスの左ボタンを押しながらドラッグして、任意の位置に図形を書きます。これでスクリプトは自動的に書かれていますので、リンク先のみ指定すれば完了です。ちなみにCtrlキーを押しながら四角を描くと、正方形を描くことができます。また、多角形の場合は、角を順にポイントしてクリックし、最後に元の角に戻ってクリックすれば図形の指定は完了します。

初級篇1.VOL７.送信フォームを作ってみよう・その５ <<

>> 初級篇1.VOL９.クロスブラウザについて考える