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

<エリア> マークは主にイメージ マップで使用され、ユーザーが指定したアクティブ エリアにマウスを移動してクリックすると、アクティブ エリア (ホットスポットとも呼ばれます) を設定できます。を選択すると、自動的に「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.

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 を実行します。キーが放されたとき