イメージマップ

• 画像の一部分をクリックするとリンクするように設定する。
• リンク先が複数あるときに、リンク先を地図のような画像で表現したいときなどに使用するとよい。
• 以下の手順で作成する。

マップ画像を準備する

• 「USEMAP="#XXX"」を<IMG SRC="Y">(画像の挿入)タグのアトリビュートとして指定する。
• XXXは、どんな名前でもよい。

【例】

• なお、マップの画像には枠線がつくので、それを隠したいときには、BORDER="0"を<IMG SRC="Y">タグのアトリビュートとして指定する。

マップの設定

• <MAP>～</MAP>で、リンク先の一覧を書くための範囲を作る。
• 「NAME="X"」のXの部分に、１でつけたUSEMAPの名前を書き入れ、<MAP>のアトリビュートとして指定する。

リンクポイントの設定をする

• <AREA>タグで、画像のどの範囲をクリックすると、どこにリンクするのかを設定する。
• SHAPE="X"を<AREA>タグのアトリビュートとして指定すると、リンクする範囲の形を設定できる。
  • Xには、rect(四角形)、circle(円形)、poly(多角形)の3種類がある。
• COORDS="X,Y"を<AREA>タグのアトリビュートとして指定すると、リンクするポイントの範囲を設定できる。
  • Xには、画像の座標が入る。

【例1】SHAPE="rect"の場合の、COORDS="X,Y"の設定の仕方

• リンクする範囲の左上と、右下の座標をコンマで区切って指定する。
• 左上のX座標,左上のY座標,右下のX座標,右下のY座標の順に指定する。
• 座標は、左上端からのピクセル数で数える。

【例2】SHAPE="circle"の場合の、COORDS="X,Y"の設定の仕方

• リンクする範囲の円の中心点の座標と、円の半径をコンマで区切って指定する。
• 中心点のX座標,中心点のY座標,半径の順に指定する。
• 座標は、左上端からのピクセル数で数える。

【例3】SHAPE="poly"の場合の、COORDS="X,Y"の設定の仕方

• 多角形の頂点の座標を、左上から逆時計回りに指定する。
• 頂点は、それぞれX座標,Y座標の順に指定する。
• 座標は、左上端からのピクセル数で数える。

リンク先を設定する

• HREF="X"を<AREA>タグのアトリビュートとして指定すると、リンク先が設定できる。
• Xには、リンク先のURLが入る。

【例】

<IMG SRC="imap04.gif" WIDTH="300" HEIGHT="339" USEMAP="#JAPAN" BORDER="0"> <MAP NAME="JAPAN"> <AREA SHAPE="circle" COORDS="250,60,25" HREF="A.html" TARGET="_blank"> <AREA SHAPE="rect" COORDS="110,115,180,140" HREF="B.html" TARGET="_blank"> <AREA SHAPE="poly" COORDS="50,195,105,310,165,305,180,200,115,150" HREF="C.html" TARGET="_blank"> </MAP><P> 枠の部分をクリックしてみましょう。

▼

枠の部分をクリックしてみましょう。

 

 

イメージマップ