Use of HTML Map tags

今天看到京东的一个营销活动，左侧浮动导航是用HTML 中的map标签写的，因此有了这篇记录的文章。

直接上图如其中的大家电

<p>
	<img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/007/036cb8017291b49666f84f83d250e50f-0.png" class="lazy" of html map tags alt="Use of HTML Map tags" >
	<map>
		<area>
	</map>
</p>

顺便在摘抄了一些相关资料奉上：

HTML

带有可点击区域的图像映射;

所有主流浏览器都支持

定义和用法

定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

提示和注释：

注释：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

注释：中的 usemap 属性可引用

HTML 与 XHTML 之间的差异

在 HTML 中， 没有结束标签。

在 XHTML 中， 必须正确地关闭。

area Attribute

Attribute	Value	Description
coords	Coordinate value	Defines the coordinates of the clickable area (area sensitive to the mouse).
href	URL	Defines the target URL for this zone.
nohref	nohref	Exclude a region from the image map.
shape	default rect circ poly	Defines the shape of the region.
target	_blank _parent _self _top	Specifies where to open the href attribute to refer to

##HTML DOM Area Object

##Area Object

Area object represents an area of ​​image mapping (image mapping refers to an image with a clickable area)

Every time the tag appears in an HTML document, it will Create an Area object.

Area object properties

Properties	Description
accessKey	Settings Or return the shortcut keys for accessing an area.
alt	Set or return the replacement text when the browser cannot display a certain area.
coords	Set or return the coordinates of the clickable area in the image map.
hash	Sets or returns the anchor portion of a URL in a zone.
host	Set or return the host name and port of a URL in a zone.
href	Sets or returns the URL of the link in the image map.
id	Set or return the id of a certain area.
noHref	Sets or returns whether a region should be active or inactive.
pathname	Sets or returns the pathname of a URL in a zone.
protocol	Sets or returns the protocol for URLs in a zone.
search	Sets or returns the query string part of a URL in a certain area.
shape	Set or return the shape of an area in the image map.
tabIndex	Set or return the tab key control order of a certain area.
target	Sets or returns where to open the link-URL in the zone.

Standard Properties

Properties	Description
className	Set or return the class attribute of the element.
dir	Set or return the direction of the text.
lang	Set or return the language code of the element.
title	Set or return the title of the element.

The above is the detailed content of Use of HTML Map tags. For more information, please follow other related articles on the PHP Chinese website!