HTML 맵 태그 사용

오늘 JD.com에서 마케팅 캠페인을 봤는데 왼쪽의 floatingnavigation이 HTML로 지도 태그를 사용해 작성되어 있어서 이 글을 쓰게 되었습니다.

위 사진은 그 중 주요 가전제품을 직접 보여줍니다

<p class="content">
	<img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/007/036cb8017291b49666f84f83d250e50f-0.png"  class="lazy"   usemap="#Mapslide" alt="HTML 맵 태그 사용" />
	<map name="Mapslide" id="Mapslide">
		<area shape="rect" coords="0,66,64,90" href="http://www.5itbao.cn" target="_blank" clstag="sale|keycount|8295365|1" />
	</map>
</p>

그런데 관련 정보를 일부 발췌했습니다.

HTML

클릭 가능한 영역으로 이미지 매핑;

모든 주요 브라우저는

정의 및 사용법

클라이언트 이미지 맵을 정의합니다. 이미지맵은 클릭 가능한 영역이 있는 이미지를 말합니다.

팁 및 Notes:

참고: 지역 요소는 항상 지도 요소 내에 중첩됩니다. 영역 요소는 이미지 맵의 영역을 정의합니다.

참고: 의 usemap 속성 은

HTML과 XHTML의 차이점

HTML에서 에는 닫는 태그가 없습니다.

XHTML에서는 가 제대로 닫혀야 합니다.

area Property

Property

Value

Description

coords

좌표값

클릭 가능한 영역(마우스에 민감한 영역)의 좌표를 정의합니다.

href

URL

이 영역의 대상 URL을 정의하세요.

nohref

nohref

이미지 맵에서 특정 지역을 제외하세요. 영역의 모양을 정의합니다.

target

• _blank

• _parent

• _self

• _top

은 href 속성을 열 위치를 지정합니다.

으로

HTML DOM Area 객체

Area 객체

Area 객체는 HTML 문서의 이미지 매핑 영역을 나타냅니다(이미지 매핑은 클릭 가능한 영역이 있는 이미지를 나타냄)

태그가 나타날 때마다 Area 개체가 생성됩니다.

Area 개체 속성

Property	Description
accessKey	영역에 액세스하기 위한 단축키를 설정하거나 반환합니다.
alt	브라우저가 특정 영역을 표시할 수 없는 경우 대체 텍스트를 설정하거나 반환합니다.
coords	이미지 맵에서 클릭 가능한 영역의 좌표를 설정하거나 반환합니다.
hash	지역에 있는 URL의 앵커 부분을 설정하거나 반환합니다.
host	특정 영역에 있는 URL의 호스트 이름과 포트를 설정하거나 반환합니다.
href	이미지 맵의 링크 URL을 설정하거나 반환합니다.
id	특정 지역의 ID를 설정하거나 반환합니다.
noHref	영역이 활성화되어야 하는지 또는 비활성화되어야 하는지를 설정하거나 반환합니다.
pathname	영역에 있는 URL의 경로 이름을 설정하거나 반환합니다.
protocol	특정 영역의 URL 프로토콜을 설정하거나 반환합니다.
search	특정 영역의 URL 중 쿼리 string 부분을 설정하거나 반환합니다.
shape	이미지 맵에서 영역의 모양을 설정하거나 반환합니다.
tabIndex	특정 영역의 탭키 제어 순서를 설정하거나 반환합니다.
target	존에서 링크 URL을 열 위치를 설정하거나 반환합니다.

Standard Properties

Property	Description
className	요소의 클래스 속성을 설정하거나 반환합니다.
dir	텍스트 방향을 설정하거나 반환합니다.
lang	요소의 언어 코드를 설정하거나 반환합니다.
title	요소의 제목을 설정하거나 반환합니다.

위 내용은 HTML 맵 태그 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!