HTML Map 标签的使用

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

直接上图如其中的大家电

<div class="content"><img src="http://img.blog.csdn.net/20150923122411908?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" usemap="#Mapslide" alt="图片" /><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></div>

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

HTML <map> 标签

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

所有主流浏览器都支持 <map> 标签。

定义和用法

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

提示和注释：

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

注释：<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。

HTML 与 XHTML 之间的差异

在 HTML 中，<area> 没有结束标签。

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

area 属性

属性值描述coords坐标值定义可点击区域（对鼠标敏感的区域）的坐标。hrefURL定义此区域的目标 URL。nohrefnohref从图像映射排除某个区域。shape

• default
• rect
• circ
• poly

定义区域的形状。target

• _blank
• _parent
• _self
• _top

规定在何处打开 href 属性指

HTML DOM Area 对象

Area 对象

Area 对象代表图像映射的一个区域（图像映射指的是带有可点击区域的图像）

在 HTML 文档中 <area> 标签每出现一次，就会创建一个 Area 对象。

Area 对象的属性

属性描述accessKey设置或返回访问某个区域的快捷键。alt设置或返回当浏览器无法显示某个区域时的替换文字。coords设置或返回图像映射中可点击区域的坐标。hash设置或返回某个区域中 URL 的锚部分。host设置或返回某个区域中 URL 的主机名和端口。href设置或返回图像映射中链接的 URL。id设置或返回某个区域的 id。noHref设置或返回某个区域是否应是活动的还是非活动的。pathname设置或返回某个区域中的 URL 的路径名。protocol设置或返回某个区域中的 URL 的协议。search设置或返回某个区域中 URL 的查询字符串部分。shape设置或返回图像映射中某个区域的形状。tabIndex设置或返回某个区域的 tab 键控制次序。target设置或返回在何处打开区域中的 link-URL。

标准属性

属性描述className设置或返回元素的 class 属性。dir设置或返回文本的方向。lang设置或返回元素的语言代码。title设置或返回元素的 title。