クリッカブルマップを使う

　時々見かけるクリッカブルマップ等と呼ばれるものは、クライアントサイド・イメージマップと言って、画像の特定範囲にリンクを貼る事が容易に出来るというものです。
　当サイト内にもあるウェブリングバナーの様に、いちいち画像を区切っていられない時や、地図状の画像を作って文字通りのイメージマップにするのが主な使い道です。

　ちなみにクライアントとはサーバと対の意味で使われる言葉で、端的に言えば端末ですが、要はユーザー個人のマシンの事。
　クライアントサイドというのはサーバーに繋がなくともクライアント側だけで出来るという意味。昔はCGIで画像をクリックした座標を取得しないとイメージマップを実現できなかったみたいです。

単純な例

<MAP name="sample">
 <AREA shape="rect" coords="20,25,80,120" href="index.html" alt="HTML guide Index">
 <AREA shape="circle" coords="140,57,43" href="index.html" alt="HTML guide トップページへ">
 <AREA shape="poly" coords="129,122,95,184,177,178" nohref alt="リンクしない">
 <AREA shape="rect" coords="0,0,199,199" href="../../index.html" alt="○○さんだー トップページ">
</MAP>
<IMG src="imgmap.png" border="1" width="200" height="200" usemap="#sample">

　　　　　　　　↓

　このようにMAPタグとAREAタグでイメージマップの内容を指定し、MAPタグに付けた名前をIMGタグのusemap属性で指定する事によって使用します。
　従って<MAP>～</MAP>は基本的にどこに書いても構いません。

　AREAタグの属性の内、shapeはイメージマップの形の指定でrect（四角形）、circle（真円）、poly（多角形）の３種。
　coodsはそれぞれの座標等の詳しい設定で、画像の左上の座標を（0,0）として、AREA="rect"の場合は四角形の左上と右下の点の座標を、"circle"の場合は中心点の座標と半径を、"poly"の場合は各点の座標を左回りに全て","で区切って指定します。座標の指定方法は(x,y)で、数値は全てpixel単位です。また、画像の外を指定しても何も起こりません。
　nohref属性を入れた部分（例では三角の部分）はリンクされなくなります。画像に合わせてリンクを「抜く」場合に使用します。
　また、範囲が重なった場合はソースで先（上）に書いたAREAタグのものが優先されます。例では最後に画像全体をリンクしていますが、先に指定した各図形の中はそれぞれの設定になっています。

≪Index　 ≪Back　 Next≫