四角形の場合、左上角と右下角２点の座標(図の左上角が0,0)を記述し、円形の場合は中央の座標(X,Y)と半径(radius)を記述します。そして多角形の場合、それぞれの座標を一筆書きになるよう記述します。その際、始点や方向は関係ありません。もし重なった範囲を指定すれば、最初の指定範囲が優先されます。
hrefはクリックした時のハイパーリンク先を記述し、nohrefは何も実行しないことを指定します。このnohrefは、たとえばクリック範囲を重ね書きし、ある部分だけハイパーリンクを除外したい時に用います。マップは最初の行から読み取られるため、まず全体の範囲を記述し、その後、除外したい範囲をnohrefで指定しなくてはなりません。そしてhrefで範囲全体を指定すると、除外したい部分を残してハイパーリンクが設定されるわけです。
nohrefの記述例として、次のようなドーナッツ状のハイパーリンク･ポイントを作ってみましょう。まず、中央の小さな円をnorefで登録してから、全体の円をハイパーリンク･ポイントとして登録します。なお、この例では<img>タグを<a>(アンカー)タグで囲んでおり、クライアントサイド･クリッカブルマップをサポートしていないブラウザなら、図全体がハイパーリンク･ポイントとなります。
クライアントサイド･クリッカブルマップ
クリッカブルマップはWWWサーバ側でimagemapと呼ばれるソフトウェアが必要であったため、クリッカブルマップをサポートしたWWWサーバ以外の場所、たとえばローカルファイルやFTPに置いても使用できませんでした。そこで、HTML文書へマップ情報を記述してブラウザ(閲覧ソフト)自身がローカルに実行できるよう、Spyglass社で新たなタグが拡張されました。この機能はネットスケープやインターネット･エクスプローラ(Microsoft社)などで使え、Internet Draftとして仕様が公開されています。James L. Seidman / A Proposed Extension to HTML: Client-Side Image Maps, December 1, 1995.
クライアントサイド･クリッカブルマップは、<img ismap>タグと同じくimgへusemap属性を付加することにより使用できます。そして、座標とURLの対応を記述したマップの作成には<map>タグを用います。
usemapを指定すると、ハイパーリンク同様、画像周辺の色が変わり、これはborder属性によって隠せます。なお、usemapはサーバ側のクリッカブルマップ機能にも対応できるようismapと一緒に置いても構いません。たとえば、下記のように両方を記述した場合、
同一文書: <img src="URL" usemap=map>
別の文書: <img src="URL" usemap=mapfile.html#map>
リモートホスト: <img src="URL" usemap=http://www.yokochin.com/mapfile.html#map>
<img src="../images/image.gif" usemap="map" ismap>
クライアント、サーバサイドクリッカブルマップ機能をサポートしているブラウザでは、クライアントサイドが優先されます。しかし、サーバサイドマップ機能しかサポートしていないブラウザへ対応させる場合は、両方記述しておくほうが親切です。
<a href="http://www.cybersaizensen.com/">
<img src="../images/donat.gif" border=0 usemap="#donat"></a>
<map name=donat>
<area shape=circle coords="39,39,16" nohref>
<area shape=circle coords="39,39,40" href="http://www.cybersaizensen.com/">
</map>
なお、この｢ハイパテキスト･マニュアル｣のサイトマップや、筆者のもう１つのホームページである｢ハリウッド最前線｣のサイトマップなどが、クライアントサイド･クリッカブルマップを使ったいい例です。じっさいの効果がご覧になりたいかたは、それらのページもぜひ参照してみて下さい。
クライアントサイド･イメージマップの場合、ブラウザの｢ステータスバー｣へURLが表示されるので、ハイパーリンク先はマウスをクリックする前にわかります。