Designerのゴミ箱

次に口の部分にエリアを指定してみます。口は四角いエリアで指定することにします。四角の場合のSHAPEのオプションタグはrectです。パラメータに入れる数字は左上角のx,y数値、右下角のx,y数値の順で、合計4つのピクセル数を入力します。右図の場合

<AREA SHAPE="RECT" COORDS="24,76,39,85" ALT="口">

となります。

●<AREA SHAPE="polygon" COORDS="n,n">

頭の部分は多角形で指定してみましょう。多角形のSHAPEパラメーターはpolygonと入力します。多角形の場合のCOORDSオプションタグのパラメータに入れるピクセル数は、各頂点のx,yの数値を全て入れます。右図の場合は

<AREA SHAPE="polygon" COORDS="11,26,23,6,54,6,75,27,39,18,26,17" ALT="頭">

となります。
<AREA>タグ内にそれぞれのリンク先を指定して出来上がりです。

クライアントサイドクリッカブルマップを使わなくても、1枚の画像を細かく切り分けて（スライスして）それぞれにリンクを張り、テーブルなどで寄せ集めて表示しても同じ物が作れますが、あまり小さな画像をたくさん使うと、かえって表示に時間がかかることもありますし、なによりタグを書くのが面倒です。
もっともこの「クライアントサイドクリッカブルマップ」も手で（アナログで）ピクセル数を指定しようとすると、かなり面倒です。しかしこの面倒な部分を自動的にやってくれるソフトがありますので、それを使ってみるのもいいかも知れません。

WINDOWSユーザー用は、Vectorから色々ダウンロード出来ます。
http://www.vector.co.jp/vpack/filearea/win/net/htmledit/support/index.html
Macintoshユーザー用はWebMapなどが有名です。
http://www.dent.niigata-u.ac.jp/html/click.htm

よく見かけるのは、広域地図にリンクを張って、観光スポットやお店紹介などを地図上からジャンプさせる、というクライアントサイドクリッカブルマップなどがありますね。アイデア次第で色々と面白い表現が可能になるかも知れません。
ジャンプ先のページはお好きなように作ってください。