まず、
1.イメージマップ用HTMLファイルを以下の要領でつくります。
以上を載せたいページのHTMLの中へ組込みます。
赤色の部分は自分用に差し変えてください。USEMAP=" "とMAP NAME=" "は同じファイル名にします。
HREF=" "はリンク先のファイル名にします。問題は領域の座標指定の仕方AREA SHAPE=" "ですが、これには矩形・円形・多角形の3種類があります。(上記の場合は矩形の領域指定です。)要領は下記に表示します。
AREA SHAPE="RECT"は矩形の領域、
AREA SHAPE="POLYGON"は多角形の領域、
AREA SHAPE="CIRCLE"は円形の領域指定です。
次にX1,Y1,X2,Y2と座標数値を記入していきます。座標数値の検出にはソフトが幾つか出ており簡単に検出できますが、ソフトを使わなくても検出できる方法もあります。
(僕の場合はGraphic Converter(Mac)で簡単に出しています。)
●ソフトを使わなくて検出する方法
というHTMLファイルを新に作ります。ここでのポイントは、IMG SRC="map.gif"の後にISMAPを入れることです。ISMAPを入れないと座標数値が出てきません。map.gif名は画像ファイル名に変えてください。A HREF=" "のリンク先名は何も入れなくていいですが、A HREF=" "だけは入れてください。
これでブラウザーの下のバー(鍵マークの横)のコメント最後部にx,yの数値が出てきます(Netscapeの場合)。これをメモします。(ちなみにGraphic Converter(Mac)の場合はGraphic Converterでmapを開くと右上にx,yの数値が出ます。)
円形領域のRは、x,yどちらかを基準にして中心点と外周点の差を計ります。
以上の要領で作成したHTMLが下記です。僕の場合11箇所を矩形で作りましたのでこの様になりました。(周りに枠をつけているので、border=0を入れています。)
手軽に出来るイメージマップ作成法でした。
| サンプル |