画像ホットスポットの使用、HTML <エリア>_html/css_WEB-ITnose の使用-htmlチュートリアル-php.cn

画像ホットスポットの使用、HTML <エリア>_html/css_WEB-ITnose の使用

WBOY

リリース： 2016-06-24 12:34:38

オリジナル

1718 人が閲覧しました

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

& & lt; area class = type id = value href = url alt = text shade = area-shape coods = value & gt;

Alt: ホットスポットの設定に使用される代替テキスト。

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

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

はホットスポットの形状を長方形に設定し、左上の座標を設定することを意味します。角の頂点は(X1, y1)、右下の角の頂点の座標は(X2, y2)です。

は、ホットスポットの形状を円に設定することを意味し、円の中心座標は (X1, y1) です。半径はrです。

ホットスポットの形状が多角形に設定されていることを示し、各頂点の座標は (X1 、y1)、(X2,y2)、(x3,y3)…。

注: x1、y1、x2、y2 の位置は、ウィンドウのサイズではなく、画像に基づいて決定されます。

: andod; --------- ;map> このタグの使用法は非常に簡単です。つまり、です。 ="イメージマップ名"> <

以下は、これら 2 つのタグの使用法を示す例です:

これは新しい本棚の写真です。その効果は次のとおりです。書籍「Website Directory」をクリックすると、新しいウィンドウが表示されます。開き、本書の紹介と注文に関する Web ページ (urlall.htm) を表示します。書籍「Web サイトデザインガイド」をクリックすると、新しいウィンドウが開き、書籍の紹介に関する Web ページが表示されます。および注文 (siteall.htm)。書籍「Web ページスキル百科事典」をクリックすると、新しいウィンドウが開き、書籍の紹介と注文 Web ページ (pagejqlall.htm) が表示されます。作成方法:

1. 画像を挿入し、画像の関連パラメータを設定し、画像マップ (newbook) への参照を示すパラメータ usemap="newbook" ismap を設定します。 2. タグを使用してイメージマップのアクティブ領域を設定し、名前を付けます: newbook

3. の位置を 3 つの長方形のアクティブ領域に分割します。本を検索し、そのリンクパラメータ href を設定します。

今回のサンプルのソースコードは以下の通りです:

<マップ名="newbook">

<エリア形状="rect" coords="56, 69,78,139" href="urlall.htm" target="_blank" alt="100,000 を超える URL がここに収集されています。 " " title="100,000 を超える URL がここに収集されています ">

<エリアの形状="rect. " coords="82,70,103,136" href="siteall.htm" target="_blank" alt="Web デザイナーのための啓発本。" " title="Web デザイナーのための啓発本">

< ;areashape=. "rect" coords="106,68,128,136" href="pageall.htm" target="_blank" alt="Web ページ制作者必読の本。 Web ページ作成者。">

この記事で紹介したエフェクトを作成する際に注意すべきいくつかのポイント:

1. < で usemap と ismap パラメータを設定することを忘れないでください。 ;img> タグ、および usemap のパラメータ値はと同じである必要があります。つまり、「イメージマップ名」は一貫している必要があります。同じ「イメージマップ」内のすべてのホットスポットエリア、つまりすべてのタグがとの間にある必要があります。

3. タグのcordsパラメータで設定した座標形式は、shapeパラメータで設定した長方形のアクションエリアに表示されないように、shapeパラメータで設定したアクションエリアの形状と一致する必要があります。コードはポリゴンであるため、局所的な頂点座標の現象が現れます。

HTML と XHTML の違い

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

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

必須属性

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

属性値の説明 DTD alt text は領域の代替テキストを指定します STF オプションの属性属性値の説明 DTD coords 座標は領域の座標を指定します STF href URL は領域のリンクターゲットを指定します STF nohref nohref は、対応するリンクが領域にないことを示します領域 STF 形状のデフォルト
rect
circle
poly はエリアの形状を指定します STF target _blank
_parent
_self
_top は新しいページを開く場所を示します TF

コア属性

タグは次のコア属性をサポートします。属性値の説明 DTD アクセスキー文字要素にアクセスするためのキーボードショートカットを設定します STF クラス class name は要素のクラス名を指定します STF dir rtl

ltr は要素内のコンテンツのテキスト方向を指定します STF id id は要素の一意の ID を指定しますSTF lang 言語コードは、要素コンテンツの言語コードを指定します。 STF スタイルスタイル定義は、要素のインラインスタイルを指定します。 STF tabindex 番号は、要素のタブオーダーを指定します。 STF タイトルテキストは、要素のツールチップテキストを指定します。 STF xml:lang 言語コードは、要素のツールチップテキストを指定します。 XHTML ドキュメント STF 内の要素コンテンツの言語コード
コアプロパティの詳細。

イベント属性

タグは、次のイベント属性をサポートします:

属性値の説明 DTD onblur スクリプトは、要素がフォーカスを失ったときにスクリプト STF を実行します onclick スクリプトは、要素エリアでマウスがクリックされたときにスクリプト STF を実行します ( ondblclick スクリプトは、要素領域でマウスボタンがダブルクリックされたときにスクリプトを実行します (左右のキーを区別せず)。 STF onfocus スクリプトは、要素がフォーカスを取得したときにスクリプトを実行します。 onmousemove スクリプト要素エリア内でマウスボタンが押されたときにスクリプト STF が実行されます。 onmouseout スクリプトは、マウスポインタが要素エリア外に移動したときにスクリプトを実行します。 onmouseover スクリプトは、マウスポインタが要素エリアに移動するとスクリプトを実行します。 key) onkeydown スクリプトは、キーが押されたときにスクリプト STF を実行します。 onkeypress スクリプトは、キーが押されて放されたときにスクリプト STF を実行します。キーが放されたとき