イメージとリンク

　リンクテキストの中にイメージを含めたいときには次のようにします。

    <A HREF="animal/bear.html"><IMG SRC="kuma.jpg" WIDTH=78 HEIGHT=95>bear</A>

bear

　この例ではイメージとテキストbearがタグ<A>と</A>に囲まれてリンクを作成しています。

マップ

　リンクのマップを作成したいときには次のようにします。

  <IMG SRC="bear_cat_dog.jpg" WIDTH=286 HEIGHT=200 USEMAP="#animal">

　この記述の意味は「イメージファイルbear_cat_dog.jpgを巾286ピクセル、高さ200ピクセルで表示してanimalという名前のmapを使用する」ということです。
　次に、<MAP>タグでanimalという名前のmapを定義します。

  <MAP NAME="animal">
   <AREA SHAPE="POLYGON" COORDS="37,52,76,35,100,49,100,152,54,185,40,156" HREF="animal/cat.html">
   <AREA SHAPE="RECT" COORDS="119,72,178,152" HREF="animal/bear.html">
   <AREA SHAPE="CIRCLE" COORDS="236,84,50" HREF="animal/dog.html">
   <AREA SHAPE="CIRCLE" COORDS="236,136,30" HREF="animal/dog.html">
  </MAP>

　<AREA>タグでSHAPE属性に形、COORDS属性に座標、HREF属性にリンク先を記述します。座標はイメージの左上が(0,0)で、ピクセル数で表します。SHAPE属性にはCIRCLE、RECT、POLYGONがあり、円ではCOORDS="中心のx座標,y座標,半径"、長方形ではCOORDS="長方形の左上のx座標,y座標,右下のx座標,y座標"、多角形ではCOORDS="頂点のx座標,y座標,・・・"です。

　左のイメージの中の動物をクリックすると、それぞれ次のリンクと同じになります。

　　　動物村へどうぞ

• cat
• bear
• dog