HTMLエリア画像ホットスポットの使い方

今回は、HTMLエリアピクチャホットスポットの使い方と、HTMLエリアピクチャホットスポットを使用する際の注意点

を紹介します。実際の事例を見てみましょう。

3d030ebd0af6c4de4f67c08a81411c56 マークは主に画像 マップ
に使用され、ユーザーがマウスを移動したときに画像マップ内に影響範囲 (ホットスポットとも呼ばれます) を設定できます。指定した領域をクリックして、事前に定義されたページに自動的にリンクします。その基本的な構文構造は次のとおりです:

<area class=type id＝Value href＝url alt＝text shape＝area-shape coods＝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 これらの点の位置は、ウィンドウのサイズではなく、画像に基づいて決定されます。

3d030ebd0af6c4de4f67c08a81411c56マークはイメージマップ内のアクティブエリアを分割するために使用されるため、分割されたアクティブエリアはイメージマップのエリア内にある必要があるため、3d030ebd0af6c4de4f67c08a81411c56マークを使用してエリアを分割する前に、別の HTML マークを使用する必要があります ;map> イメージ マップの範囲を設定し、指定されたイメージ マップの名前を設定します。このタグの使用法は非常に簡単です。つまり、18be2b01b1db17f71805ca29a297ce04

これら 2 つのタグの使用法を示す例を以下に示します。
これは新しい本棚の画像です。その効果は次のとおりです。「Website Directory」本をクリックすると、新しいウィンドウが開きます。この書籍に関する はじめに
と注文の Web ページ (urlall.htm) が表示されます。書籍「Web サイト デザイン ガイド」をクリックすると、新しいウィンドウが開き、この書籍の紹介と注文に関する Web ページ (siteall.htm) が表示されます。 ); 書籍「Web ページ スキル エンサイクロペディア」をマウスでクリックすると、新しいウィンドウが開き、書籍の紹介と注文 Web ページ (pagejqlall.htm) が表示されます。作成方法:
1. 画像を挿入し、画像の関連パラメータを設定し、パラメータ usemap="newbook" ismap を画像マップ (newbook) への 参照
を示すように設定します。

2. dab9f699790ab0922e596ecb9f6677d5 を使用して画像マップのアクティブ領域を設定し、名前を付けます: newbook;

3. 7d788cd4ff7e6ba271b658ca30c65d82 タグ内の usemap および ismap パラメーター、および usemap パラメーター値は、dab9f699790ab0922e596ecb9f6677d5 タグ内の name パラメーター値と同じである必要があります。つまり、「イメージ マップ名」は一貫している必要があります。
2. 同じ「イメージ マップ」内のすべてのホットスポット エリアは、イメージ マップの範囲内にある必要があります。つまり、すべての 03fc64e1e502d5ba947b3a9af06d2d2a と 205a5be6c2444442266d3019416bb37a の間にある必要があります。 03fc64e1e502d5ba947b3a9af06d2d2aタグのcordsパラメータで設定する座標形式は、アクションエリアの形状が一致するようにする必要があります。形状パラメータですが、多角形領域の頂点座標はコードに設定されます。

HTML と XHTML の違い

HTML では、03fc64e1e502d5ba947b3a9af06d2d2a 要素に終了タグは必要ありません。

ただし、XHTML では、03fc64e1e502d5ba947b3a9af06d2d2a 要素を正しく閉じる必要があります。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

Web ページ上に QQ 一時ダイアログ ボックスをポップアップする方法

トリガー メソッドを使用して、ファイル タイプの入力をクリックせずにファイル選択ダイアログ ボックスをポップアップする方法

HTMLでjsを使用してローカルシステム時間を取得する方法

以上がHTMLエリア画像ホットスポットの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。