クリッカブルマップ／イメージマップ

上の絵は１つの画像の中に、四角形、円、五角形が書いてあるのですが、それぞれの図形をクリックすると次のページが表示されます。このように、図の一部をボタンとして使うことができます。

さて、上の例では次のように書きます。

    <img src="click.gif" usemap="#map" border="0">

    <map name="map">
     <area shape="rect"   coords="20,10,80,60" href="1.html">
     <area shape="circle" coords="150,60,30"   href="2.html">
     <area shape="poly"   coords="200,50,240,90,290,70,290,30,240,10"  href="3.html">
     <area shape="default" nohref>
    </map>

一つずつ説明します。

<img src="click.gif" usemap="#map" border="0">

imgは画像を張りつけるタグですね。これにusemap="#マップ名" としてマップと関連付けます。マップ名の前の # を忘れないでください。ついでに図の回りにリンクの枠が表示されるのが格好悪いので border="0" として、枠を消します。

<map name="map">
　　：
</map>

ここでマップの定義をします。マップ名には先に img タグ内で指定したマップ名を書きます。ここには # は要りません。

<area shape="rect"   coords="20,10,80,60" href="1.html">

四角形にリンクを定義します。四角形の左上のX,Y座標と右下のX,Y座標をcoordsに定義します。

座標とは画像全体を点の集まりで捕らえたとき、左上から右方向と下方向に点いくつ分移動したかで、画像内の位置を表す数値です。右方向をX座標、下方向をY座標と呼びます。

<area shape="circle" coords="150,60,30"   href="2.html">

円にリンクを定義します。円の中心のX,Y座標と半径を指定します。

<area shape="poly"   coords="200,50,240,90,290,70,290,30,240,10"  href="3.html">

多角形にリンクを定義します。各頂点のX,Y座標を順に指定します。

<area shape="default" nohref>

指定した範囲以外をクリックした時の動きを指定します。nohrefはどこにもリンクが張られていない状態、つまり何もしないことを意味します。ここにhref=""を指定すればそこにリンクが張られます。

accesskey=a

任意のアルファベットを指定。ショートカットになり、WindowsならAlt+a, Macならcommand+a。

---

Last modified: Tue Jun 20 13:48:08 JST 2000