逆引きHTML-15.イメージマップ-4.クリック位置の指定

15. イメージマップ

15-4. クリック位置の指定

●タグ

<AREA>

●構文

xxx	：リンク先を設定するエリアの種類を下記から指定
	rect：四角形 circle：円 polygon：多角形
yyy	：SHAPE属性値合わせて、各座標をピクセルで指定
	rect：X1,Y1,X2,Y2 circle：X1,Y1,R polygon：X1,Y1,X2,Y2,・・・,Xn,Yn

●説明

画像に対してイメージマップを指定し、その画像のどの部分をクリック位置に指定するのかを定義するものです。クリック位置には、上記のように３種類の形状が指定可能で、それぞれ「四角形」「円」「多角形」となっています。

クリック位置の形状により、その領域の指定方法が異なるので注意が必要です。下記に（下手くそな）図がありますので、直感的に理解しましょう。

「rect」の場合: COORDS="X1,Y1,X2,Y2" ・・・左上の(X,Y)と右下の(X,Y)を順番に指定します
「circle」の場合: COORDS="X1,Y1,R" ・・・円の中心(X,Y)と半径Rを指定します
「polygon」の場合: COORDS="X1,Y1,X2,Y2,X3,Y3,X4,Y4,X5,Y5,X6,Y6,X7,Y7" ・・・多角形の頂点(Xi,Yi)を順番に指定します。順番の方向はどちらでも構いません。

●HTML4.0

AREA要素

●サンプル

以下２つのHTMLファイルと画像ファイルで構成（実際に表示）

「15-01-1.html」

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>イメージマップ</TITLE> </HEAD> <BODY> <IMG SRC="imagemap.gif" ALT="メニュー" BORDER="0" WIDTH="150" HEIGHT="270" USEMAP="#menu"> <MAP NAME="menu"> <AREA SHAPE="rect" COORDS="7,7,143,60" HREF="15-01-2.html"> <AREA SHAPE="circle" COORDS="75,105,35" HREF="15-01-2.html"> <AREA SHAPE="polygon" COORDS="7,170,143,170,143,210,70,260,7,210" HREF="15-01-2.html"> </MAP> </BODY> </HTML>

「15-01-2.html」

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN"> <HTML> <HEAD> <TITLE>イメージマップ</TITLE> </HEAD> <BODY> <A HREF="15-01-1.html">戻る</A> </BODY> </HTML>

逆引きHTMLリファレンス

15. イメージマップ

15-4. クリック位置の指定