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

関連するプロパティのリストを含む 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 を設定します。

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

コードをコピー
コードは次のとおりです。

<img src="upload/2022/web/logo.gif" width="207" height="148" alt="新しい本棚" hspace="10" align="left" usemap="#newbook" border="0">
<map name="newbook">
<area shape="rect" coords="56,69,78,139" href="urlall.htm" target="_blank" alt="ここには 100,000 を超える URL が収集されています。" title="ここには 100,000 を超える URL が収集されています。"">
<area shape="rect" coords="82,70,103,136" href="siteall.htm" target="_blank" alt="Webサイトデザイナーの啓蒙書。" title="Webサイトデザイナーの啓蒙書。"">
<area shape="rect" coords="106,68,128,136" href="pageall.htm" target="_blank" alt="Web ページ作成者が必ず読むべき本。" title="Web ページ作成者が必ず読むべき本。"">
</マップ>

この記事で説明するエフェクトを作成するときに留意すべき点がいくつかあります。

1. <img> タグに usemap パラメータと ismap パラメータを設定することを忘れないでください。usemap パラメータの値は <map> タグの name パラメータの値と同じである必要があります。つまり、「イメージ マップ名」は一貫している必要があります。

2. 同じ「イメージ マップ」内のすべてのホットスポットは、イメージ マップの範囲内にある必要があります。つまり、すべての <area> タグは <map> と </map> の間にある必要があります。

3. 多角形領域の頂点の座標が、shape パラメータによって設定された長方形のアクション領域内に設定される現象を回避するために、<area> タグ内の cords パラメータの座標形式は、shape パラメータによって設定されたアクション領域の形状と一致する必要があります。

HTML と XHTML の違い

HTML では、<area> 要素に終了タグは必要ありません。

ただし、XHTML では、<area> 要素を適切に閉じる必要があります。

必須属性

DTD 列は、この属性をサポートするドキュメント タイプを示します。 S=厳格、T=移行、F=フレームセット。

財産価値説明するDTD
代替文章地域の代替テキストを指定するステファニー

オプション属性

財産価値説明するDTD
座標座標エリアの座標を指定するステファニー
参照メールアドレス地域のリンクターゲットを指定するステファニー
ノーレフノーレフ該当エリアに該当するリンクがないことを示しますステファニー
デフォルト
長方形

ポリ
エリアの形状を指定しますステファニー
ターゲット_空白
_親
_自己
_トップ
新しいページを開く場所を示しますTF

コア属性

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

財産価値説明するDTD
アクセスキーキャラクター要素にアクセスするためのキーボードショートカットを設定するステファニー
クラスクラス名要素のクラス名を指定しますステファニー
ディレクトリrtl
ltr
要素内のコンテンツのテキスト方向を指定しますステファニー
id id要素の一意のIDを指定しますステファニー
ラン言語コード要素のコンテンツの言語コードを指定しますステファニー
スタイルスタイルの定義要素のインラインスタイルを指定しますステファニー
タブインデックス番号要素のタブ順序を指定しますステファニー
タイトル文章要素のツールチップテキストを指定しますステファニー
xml:lang言語コードXHTML文書内の要素のコンテンツの言語コードを指定しますステファニー

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


イベント属性

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

財産価値説明するDTD
ぼやけているスクリプト要素がフォーカスを失ったときにスクリプトを実行するステファニー
クリック時スクリプト要素領域でマウスをクリックしたときにスクリプトを実行します(左ボタンまたは右ボタンに関係なく)。ステファニー
クリックスクリプト要素領域でマウスをダブルクリックしたときにスクリプトを実行します(左ボタンと右ボタンに関係なく)ステファニー
オンフォーカススクリプト要素がフォーカスを取得したときにスクリプトを実行するステファニー
マウスダウン時スクリプト要素領域でマウスボタンが押されたときにスクリプトを実行します(左ボタンまたは右ボタンに関係なく)ステファニー
マウスを動かすスクリプトマウスポインタが要素領域内を移動したときにスクリプトを実行するステファニー
マウスアウト時スクリプトマウスポインタが要素領域から外れたときにスクリプトを実行するステファニー
マウスオーバー時スクリプトマウスポインタが要素領域に入ったときにスクリプトを実行するステファニー
マウスを離すスクリプト要素領域でマウスボタン(左ボタンまたは右ボタンに関係なく)を放したときにスクリプトを実行します。ステファニー
キーダウンスクリプトキーが押されたときにスクリプトを実行するステファニー
キーを押すとスクリプトキーが押されて放されたときにスクリプトを実行するステファニー
オンキーアップスクリプトキーを離したときにスクリプトを実行するステファニー

<<:  CSS 表示属性のインラインブロックレイアウト実装の詳細な説明

>>:  ページのキャッシュを防ぐソリューション

推薦する

HTML/CSSにおける記号論の詳細な説明

この記事では、ソシュールの言語哲学などの理論に基づいて、CSS の class 属性は不要であると主...

srcまたはcss背景画像のurl値はbase64でエンコードされたコードです

ウェブ上の一部の画像の src または CSS 背景画像 URL の後に、data:image/pn...

タブステータスバーの切り替え効果を実現するための js と jQuery

今日は、タブ バーをクリックして切り替えるという目的を実現するために、js と jQuery を使用...

JVM 上の高性能データ形式ライブラリ パッケージである Apache Arrow の紹介とアーキテクチャ (Gkatziouras)

Apache Arrow は、BigQuery を含むさまざまなビッグデータ ツールで使用される一...

MySQL ログの設定と表示方法

MySQL には次のログがあります。エラーログ: -log-errクエリログ: -logスロークエリ...

JavaScript は単一のリンクリストプロセス分析を実装します

序文:複数の要素を格納するために、配列は最も一般的に使用されるデータ構造ですが、配列には多くの欠点も...

CSS3マスクレイヤーのくり抜き効果を実現するさまざまな方法

この記事では、マスク レイヤーの中空化を実現する 4 つの方法を紹介します。みんなと共有し、自分用の...

M1 チップに MySQL 8.0 データベースをインストールする方法 (画像とテキスト)

1. ダウンロードまず、MySQLの国内ミラーをお勧めします。特に速いわけではありませんが、それで...

Vueコンポーネントの再利用と拡張の詳細な説明

目次概要延長は必要ですか?スロットJavaScript ユーティリティ関数拡張コンポーネントの複数の...

JavaScript でエラーが発生しやすい演算子操作の概要

目次算術演算子異常状況1: 特殊値リテラルを含む操作異常な状況 2: 他の種類のデータが数学演算に関...

WeChatアプレット仮想リストの応用例

目次序文仮想リストとは何ですか?デモ効果準備スクリーンの高さとボックスの高さ最適化要約する序文人気の...

WeChatミニプログラムビデオ集中砲火位置ランダム

この記事では、WeChatミニプログラムのビデオ弾幕の位置をランダム化するための具体的なコードを紹介...

MySQL のフィールドに一意のインデックスを追加および削除する方法

1. PRIMARY KEY(主キーインデックス)を追加するmysql>ALTER TABLE...

CentOS7.5にHarbor1.7をインストールして設定するプロセス全体

1. 必要なパッケージをダウンロードする wget -P /usr/local https://st...

DockerでRedashの中国語版をデプロイしてインストールする方法の詳細な説明

1. インストール手順 Linux 環境でのローカル インストールと比較すると、Docker のイン...