관련 속성 목록이 포함된 HTML 영역 이미지 핫스팟 사용 소개_HTML/Xhtml_웹 페이지 제작

WBOY
풀어 주다: 2016-05-16 16:39:25
원래의
1242명이 탐색했습니다.

태그는 이미지 맵에서 주로 사용됩니다. 이 태그를 통해 이미지 맵에 활성 영역(핫스팟이라고도 함)을 설정할 수 있으므로 사용자가 지정된 활성 영역으로 마우스를 이동할 수 있습니다. 클릭하시면 자동으로 해당 프리셋 페이지로 연결됩니다. 기본 구문 구조는 다음과 같습니다.

text

class 및 id: hot을 지정합니다. 각각 유형 및 ID 번호입니다.

alt: 핫스팟을 설정하는 데 사용되는 대체 텍스트입니다.

href: 핫스팟에 연결된 URL 주소를 설정하는 데 사용됩니다.

모양 및 좌표: 핫스팟의 모양과 크기를 설정하는 데 사용되는 두 가지 주요 매개변수입니다. 기본 사용법은 다음과 같습니다.

핫스팟의 모양을 직사각형으로 설정하는 것을 의미하며, 좌표는 왼쪽 상단 꼭지점의 좌표는 (X1, y1)이고, 오른쪽 하단 꼭지점의 좌표는 (X2, y2)입니다.

은 핫스팟의 모양을 원으로 설정하는 것을 의미하며, 원의 중심 좌표는 (X1, y1)입니다. ), 반경은 r입니다.

은 핫스팟의 모양이 다각형으로 설정되고 각 좌표가 정점은 ( X1,y1), (X2,y2), (x3,y3)…

비고: x1, y1, x2, y2의 위치는 창 크기가 아닌 사진을 기준으로 결정됩니다.

표시는 이미지 맵에서 액션의 영역을 나누기 때문에, 그것이 나누는 액션의 영역은 이미지 맵의 영역 내에 있어야 하므로 < 영역을 분할하려면 HTML을 사용해야 합니다. 또 다른 태그인 은 이미지 맵의 범위를 설정하고 지정된 이미지 맵의 이름을 설정하는 데 사용됩니다. 지도 이름="이미지 지도 이름"> .... ..

다음은 이 두 태그의 사용법을 보여주는 예입니다.

다음은 새 책장의 사진입니다. 효과는 다음과 같습니다. 마우스가 책 "Website Directory"를 클릭할 때. 책 "웹사이트 디자인 가이드"를 마우스로 클릭하면 책 소개와 주문 페이지(urlall.htm)가 표시되는 새 창이 열립니다. 마우스 클릭 시 주문 웹 페이지(siteall.htm); 책 "웹페이지 기술백과사전"에서는 책 소개와 주문 웹페이지(pagejqlall.htm)가 표시되는 새 창이 열립니다. 제작 방법:

1. 이미지를 삽입하고, 이미지의 관련 매개변수를 설정하고, 태그에 usemap="newbook" ismap 매개변수를 설정하여 이미지 맵(newbook)에 대한 참조를 나타냅니다. );

2. 이미지 맵의 효과 영역을 설정하고 이름을 지정합니다.

3. 세 권의 책 위치를 타겟팅하려면 세 개의 직사각형 작업 영역을 나누고 해당 링크 매개변수 href를 설정하세요.

이 예제의 소스코드는 다음과 같습니다.

코드를 복사하세요
코드는 다음과 같습니다.

새 책장
" coords="56,69,78,139 " href="urlall.htm" target="_blank" alt="여기에 100,000개 이상의 URL이 수집되었습니다." "Title="여기에 100,000개 이상의 URL이 수집되었습니다.
🎜>웹페이지 제작자가 꼭 읽어야 할 책 title=



이 글에서 소개한 효과를 만들 때 주의해야 할 몇 가지 사항:

1. 마크에 usemap 및 ismap 매개변수를 설정하는 것을 잊지 마세요. usemap의 이름 매개변수 값은 동일해야 합니다. 즉, "이미지 맵 이름"이 일치해야 합니다.

2. 동일한 "이미지 맵"은 이미지 맵의 범위 내에 있어야 합니다. 즉, 모든 태그는

3. 태그의 cords 매개변수에 의해 설정된 형식은 모양 매개변수 설정과 동일해야 합니다. 모양 매개변수에 직사각형 효과 영역이 설정되는 현상을 피하기 위해 꼭지점은 폴리곤 영역의 좌표는 코드에 설정됩니다.

HTML과 XHTML의 차이점

HTML에서 요소에는 닫는 태그가 필요하지 않습니다.

그러나 XHTML에서는 요소가 올바르게 닫혀야 합니다.

필수 속성

DTD 열은 이 속성을 지원하는 문서 유형을 나타냅니다. S=엄격, T=전환, F=프레임세트.
属性 描述 DTD
alt 文本 为一个区域指定备选文本 STF

선택 속성

속성 값 설명 DTD 좌표 좌표 지역 좌표 지정 STF ref 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으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿