HTML タグ - クリック可能な領域を含むイメージ マップを作成する

定義と使用法

クライアントイメージマップを定義します。イメージマップとは、クリック可能な領域のある画像を指します。

すべての主要なブラウザは

注: エリア要素は常にマップ要素内にネストされます。 area 要素は、イメージ マップ内のエリアを定義します。

の usemap 属性は

例

クリック可能な領域を含むイメージマップ:

リーリー

効果は次のとおりです（クリックして効果を自分で表示できます）:

添付ファイル: タグの coords 属性

定義と使用法

coords 属性は、領域の x 座標と y 座標を指定します。

coords 属性は、領域のサイズ、形状、位置を指定するために、shape 属性と組み合わせて使用​​されます。

画像の左上の座標は「0,0」です。

詳しい説明:

タグの coords 属性は、クライアント イメージ マップ内のマウス感知領域の座標を定義します。座標の番号とその意味は、shape 属性で決定された領域の形状によって異なります。クライアント イメージ マップ内のハイパーリンク領域は、長方形、円、多角形などとして定義できます。

各形状の適切な値は以下のとおりです:

サークル：shape="circle"、coords="x,y,z"

ここで、x と y は円の中心の位置を定義し (「0,0」は画像の左上隅の座標です)、r は円の半径 (ピクセル単位) です。

ポリゴン：shape="polygon"、coords="x1,y1,x2,y2,x3,y3,..."

「x,y」座標の各ペアは、多角形の頂点を定義します (「0,0」は画像の左上隅の座標です)。三角形を定義するには少なくとも 3 セットの座標が必要です。高緯度のポリゴンではさらに多くの頂点が必要です。

ポリゴンは自動的に閉じられるため、エリア全体を閉じるためにリストの最後にある最初の座標を繰り返す必要はありません。

長方形: 形状="長方形"、座標="x1,y1,x2,y2"

最初の座標は長方形の一方の角の頂点座標、もう一方の座標は反対側の角の頂点座標、「0,0」は画像の左上角の座標です。長方形の定義は、実際には 4 つの頂点を持つ多角形を定義する簡略化された方法であることに注意してください。

たとえば、次の XHTML フラグメントは、100x100 ピクセル画像の右下 4 分の 1 にマウス感知領域を定義し、画像のちょうど中央に円形領域を定義します。

リーリー

ヒントとメモ

注: エリアタグ内の座標が他のエリアと重複する場合、最初に表示されるエリアタグが最初に使用されます。ブラウザは、画像の境界外の座標を無視します。