関連する属性のリストを含む HTML エリア画像ホットスポットの使用方法の紹介_HTML/Xhtml_Web ページの制作

WBOY
リリース: 2016-05-16 16:39:25
オリジナル
1253 人が閲覧しました

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

text

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

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

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

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

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

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

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

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

マークはイメージマップ内のアクションの領域を分割するため、分割するアクションの領域はイメージマップの領域内にある必要があるため、< を使用する前にarea> エリアを分割するには、HTML を使用する必要があります。 別のタグ は、イメージ マップの範囲を設定し、指定されたイメージ マップの名前を設定するために使用されます。マップ名="イメージ マップ名"> .....

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

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

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

2.

マークを使用して、イメージ マップの効果範囲を設定します。 3 冊の本の位置をターゲットにするには、3 つの長方形のアクション領域を分割し、それらのリンク パラメータ href を設定します。

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

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

新しい本棚
" coords="56,69,78,139 " href="urlall.htm" target="_blank" alt="100,000 を超える URL がここに収集されました。" "Title="100,000 を超える URL がここに収集されました。"
Web ページ作成者必読の本 title=



この記事で紹介するエフェクトを作成する際の注意点:

1. 関連する属性のリストを含む HTML エリア画像ホットスポットの使用方法の紹介_HTML/Xhtml_Web ページの制作 マーク内の usemap パラメータと ismap パラメータ、およびパラメータ値を忘れずに設定してください。 usemap の

マークは同じである必要があります。つまり、「イメージ マップ名」はすべてのホットスポット領域で一致している必要があります。同じ「イメージ マップ」内のすべての タグは

の間にある必要があります。 タグ内のcordsパラメータで設定した形式は、shapeパラメータで設定した四角形の効果領域を回避するために、shapeパラメータの設定と一致する必要があります。コードにはポリゴン領域の座標が設定されます。

HTML と XHTML の違い

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

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

必須属性

DTD 列は、どのドキュメント タイプがこの属性をサポートしているかを示します。 S=厳密、T=移行、F=フレームセット。
属性 描述 DTD
alt 文本 为一个区域指定备选文本 STF

オプションの属性

テーブル>

コア属性

タグは次のコア属性をサポートします:

プロパティ 説明 DTD
座標 座標 領域の座標を指定する STF
href URL リージョンのリンク ターゲットを指定する STF
nohref nohref そのエリアに対応するリンクがないことを示します STF
形状 デフォルト
属性 描述 DTD
coords 坐标 指定一个区域的坐标 STF
href URL 指定一个区域的链接目标 STF
nohref nohref 指出区域内没有相应的链接 STF
shape default
rect
circle
poly
指定区域的形状 STF
target _blank
_parent
_self
_top
指出在何处打开新页面 TF
長方形円ポリ
領域の形状を指定する STF
ターゲット _blank_parent_self_top 新しいページを開く場所を指定します TF
属性 描述 DTD
accesskey 字符 设置访问元素的键盘快捷键 STF
class 类名 指明元素的类名 STF
dir rtl
ltr
指定元素里内容的文本方向 STF
id id 指明元素的唯一id STF
lang 语言代码 指定元素内容的语言代码 STF
style 样式定义 指定元素的内嵌样式 STF
tabindex 数字 指定元素的Tab键顺序 STF
title 文本 指定元素的提示文本 STF
xml:lang 语言代码 在XHTML文档中指定元素内容的语言代码 STF

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


イベントのプロパティ

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

属性 描述 DTD
onblur 脚本 当元素失去焦点时执行脚本 STF
onclick 脚本 在元素区域内单击鼠标(不区分左右键)时执行脚本 STF
ondblclick 脚本 在元素区域内双击鼠标(不区分左右键)时执行脚本 STF
onfocus 脚本 当元素取得焦点时执行脚本 STF
onmousedown 脚本 在元素区域内按下鼠标键(不区分左右键)时执行脚本 STF
onmousemove 脚本 当鼠标指针在元素区域内移动时执行脚本 STF
onmouseout 脚本 当鼠标指针移出元素区域时执行脚本 STF
onmouseover 脚本 当鼠标指针移入元素区域时执行脚本 STF
onmouseup 脚本 在元素区域内松开鼠标键(不区分左右键)时执行脚本 STF
onkeydown 脚本 按下一个键时执行脚本 STF
onkeypress 脚本 按下并松开一个键时执行脚本 STF
onkeyup 脚本 松开一个键时执行脚本 STF
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート