今天看到京东的一个营销活动,左侧浮动导航是用HTML 中的map标签写的,因此有了这篇记录的文章。
直接上图如其中的大家电
<p> <img of html map tags alt="Use of HTML Map tags" > <map> <area> </map> </p>
顺便在摘抄了一些相关资料奉上:
HTML
带有可点击区域的图像映射;
所有主流浏览器都支持
定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。
注释:area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
在 HTML 中, 没有结束标签。
在 XHTML 中, 必须正确地关闭。
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 |
|
Defines the shape of the region. |
target |
|
Specifies where to open the href attribute to refer to |
##Area Object
Every time the tag appears in an HTML document, it will Create an Area object.
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. |
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!