クリックする場所によってリンク先が違う絵ってありますよね。あれがクリッカブル・マップです。一昔前までは、Webサーバーにクリッカブル・マップを実現するためのソフトがインストールされていて、クリックされた場所とリンク先の関係を書いた設定ファイルを準備しておかないと、クリッカブル・マップは使えませんでした。このような方式をServer Side Image Mapといいますが、サーバーに負荷がかかるし、クリックしないとどこにリンクされるかわからないという欠点がありました。
ところが、HTMLの中に必要な情報を書いておけば、クリッカブル・マップの機能を使えるようになりました。このような方式をClient Side Image Mapといい、Netscape 2.0以降で使えるようになりました。この方式は、HTML 3.2で追加され、今ではNetscape以外でも、大半のブラウザーで使えるようになっています。
さて、能書きはこのくらいにして、実際の使い方をご説明いたしましょう。以下のようにして使います。
<P><IMG src="sample.gif" alt="サンプルの絵" usemap="#sample_map"></P> <MAP name="sample_map"> <AREA shape="rect" coords="130,140,200,160" href="sample1.html" alt="サンプル1"> <AREA shape="circle" coords="50,50,20" href="sample2.html" alt="サンプル2"> <AREA shape="polygon" coords="20,20,30,40,10,40" href="sample3.html" alt="サンプル3"> </MAP>
クリッカブル・マップの情報は、<MAP>を使って書きます。クリッカブル・マップにしたい絵がどの<MAP>を使うかは、usemap属性を使って書きます。ここに、使いたい<MAP>の名前を#に続けて書きます。異なるHTMLファイルの<MAP>を使うこともできますが、ややこしくなるだけだと思うので、ここでは説明しません。
次は、<MAP>の中の書き方です。<MAP>の名前はname属性を使って書きます。ひとつのHTMLファイルの中に複数の<MAP>を作ることも可能です。名前を変えればいいだけです。
そして、クリックされた場所とリンク先の関係は<AREA>を使います。領域の形をshape属性で、領域の座標をcoords属性で、リンク先をhref属性で、代わりの文字情報をalt属性で書きます。shape属性の種類と、それぞれのcoordsの書き方は以下のとおりです。
領域の形 shape属性値 coords属性値 四角 rect 左上のx座標,左上のy座標,右下のx座標,右下のy座標 円 circle 中心のx座標,中心のy座標,半径 多角形(n角形) polygon 1番目のx座標,1番目のy座標, ....,n番目のx座標,n番目のy座標
さすがに、これだけはツールを使って座標を取らないと辛いですね。
さて、ここまでの内容を理解すれば、普通のページを作るのに、困ることはないでしょう。HTMLの達人にかなり近付いたはずです。しかし、もう一歩踏み込んで、より多くの環境で正しく表示されるページの作り方を学んでみましょう。