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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:39 PM

html

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

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 がここに収集されました。"

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

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

関連する属性のリストを含む 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

そのエリアに対応するリンクがないことを示します

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

新しいページを開く場所を指定します

属性	值	描述	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