関連するプロパティのリストを含む HTML エリア イメージ ホットスポットの使用の概要

<area> タグは主にイメージマップで使用されます。イメージマップにアクティブ領域 (ホットスポットとも呼ばれます) を設定するために使用できます。ユーザーが指定されたアクティブ領域にマウスを移動してクリックすると、事前に設定されたページに自動的にリンクされます。基本的な文法構造は次のとおりです。

<area class=type id=Value href=url alt=text shape=area-shape columns=value>

class と id: ホットスポットのタイプと ID 番号をそれぞれ指定します。

alt: ホットスポットを設定するために使用される代替テキスト。

href: ホットスポットがリンクされる URL アドレスを設定するために使用されます。

形状と座標: ホットスポットの形状とサイズを設定するために使用される 2 つの主要なパラメーターです。基本的な使い方は次のとおりです。

<area shape="rect" coords="x1, y1,x2,y2" href=url> は、ホットスポットの形状を長方形に設定し、左上隅の頂点の座標を (X1, y1)、右下隅の頂点の座標を (X2, y2) とすることを意味します。

<area shape="circle" coords="x1, y1,r" href=url> は、ホットスポットの形状を、中心座標 (X1, y1) と半径 r の円に設定することを意味します。

<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url> は、ホットスポットの形状がポリゴンに設定され、各頂点の座標が順に (X1, y1)、(X2, y2)、(x3, y3) ...... であることを意味します。

注: ポイント x1、y1、x2、y2 の位置は、ウィンドウのサイズではなく、画像によって決まります。

<area> タグはイメージマップ内の有効領域を分割するために使用されるため、分割された有効領域はイメージマップの領域内に収まっている必要があります。したがって、<area> タグを使用して領域を分割する前に、別の HTML タグ <map> を使用してイメージマップの有効領域を設定し、指定したイメージマップの名前を設定する必要があります。このタグの使用方法は非常に簡単で、<map name="イメージマップ名">... </map> です。

次の例は、これら 2 つのタグの使用方法を示しています。

これは新しい本棚の画像です。 望ましい効果は、マウスで「URL ディレクトリ」という本をクリックすると、新しいウィンドウが開き、本の紹介と注文の Web ページ (urlall.htm) が表示されること、マウスで「Web サイト設計ガイド」という本をクリックすると、新しいウィンドウが開き、本の紹介と注文の Web ページ (siteall.htm) が表示されること、マウスで「Web ページ スキル百科事典」という本をクリックすると、新しいウィンドウが開き、本の紹介と注文の Web ページ (pagejqlall.htm) が表示されることです。作り方：

1. 画像を挿入し、画像の関連パラメータを設定します。<img> タグで、パラメータ usemap="newbook" ismap を設定して、イメージ マップ (newbook) への参照を示します。

2. <map> タグを使用してイメージ マップの効果領域を設定し、newbook という名前を付けます。

3. <area> タグを使用して 3 冊の本を 3 つの長方形の領域に分割し、リンク パラメータ href を設定します。

制作は完了です。この例のソースコードは次のとおりです。

オプション属性

コア属性

<area> タグは次のコア属性をサポートしています。

コアプロパティに関する詳細情報。

イベント属性

<area> タグは次のイベント属性をサポートします。