フレームはいったんお休みにして「Profile」ページを仕上げてしまいましょう。プロフィールの右側のページがまだ全然出来ていませんね。ここには私の似顔絵（あまり似てないかも知れません・笑）があります。そして頭をクリックすると、ちょっと寂しい（笑）画像が現れます。目や口をクリックしても別ページにリンクされています（恥ずかしいのであまり見ないでください・笑）。この似顔絵は1枚のGIF画像です。画像にリンクを張るのは、前にやりましたが、1枚の画像にたくさんのリンクを仕込む方法はやっていません。これはクライアントサイドクリッカブルマップという手法を使うことで実現します。
クライアントサイドクリッカブルマップは画像の中に任意のエリアを指定して、それぞれにリンクを張ることができるものです。エリアの形は正円、長方形、多角形の3種類です。また「指定したエリア以外の部分」という指定もありますがIEでは認識されないこともありますので、使わない方が良いでしょう。
まずは「contents.html」に「prof-face.gif」を貼り付けてください。

●<IMG SRC="n" USEMAP="#n">
●<MAP NAME="n">
●<AREA SHAPE="circle" COORDS="n,n" ALT="n">
では順を追って説明していきます。最初は目の部分をエリア指定してみましょう。まず、画像を配置するIMGタグの中に「この画像にはクライアントサイドクリッカブルマップを適応します」という宣言をします。USEMAPというオプションタグを書き込んでください。パラメータには、「#」を付けてクリッカブルマップの名前を入れます（任意の名前でOKです）。ここでは「face」という名前にしました。

<IMG SRC="../img/prof-face.gif" ALT="似顔絵" BORDER="0" WIDTH="85" HEIGHT="100" USEMAP="#face">

IMGタグの後にエリアとリンク先を指定します。マップを指定するタグはMAPです。<MAP>と</MAP>の中にエリアとリンク先を指定を書き込みます。<MAP>開始タグには、どの画像のマップの指定なのかを指示しなければなりませんので、先ほど付けた名前をNAMEオプションタグで指定します。パラメータにはもちろん先ほどの名前を入れます。「#」はいりません。

<MAP NAME="face">〜</MAP>

エリア指定のタグは<AREA>です。単独のタグですので閉じタグはいりません。まずエリアタグにオプションでエリアの形を指示します。形を指示するにはSHAPEオプションを使います。パラメータに形を入れます。丸はcircleです。
次にエリアの範囲を指定します。COORDSオプションに続けてピクセル数で指定します。丸の場合の範囲指定の仕方は、画像の左上を起点に「横（x）方向に○ピクセル、縦（y）方向に○ピクセルの地点を中心とした、半径○ピクセルの円」という3つの数字を「,」区切りで指定します。上の図では中心点はx=21,y=51で半径10ピクセルですので、以下のようになります。
<AREA SHAPE="circle" COORDS="21,51,10">
さらに<AREA>タグ内にリンク先への指定も入れてしまいます。HREF=に続けてパスを書き込んでください。ALTも入れておきましょう。

<AREA SHAPE="circle" COORDS="21,51,10" HREF="eye.html" ALT="右目">

両目にリンクを張りたいので左目用の<AREA>タグも続けて書きます。<MAP>〜</MAP>内にいくつ<AREA>タグが入ってもかまいません。