干什么用的
<map> 标签一般与 <area> 标签一起使用，来定义一个图像映射（也就是一个可点击的链接区域）。
这么来说吧，如果让你在一个区域添加一个点击热点，你怎么加？
如上图，蓝色标记的区域，需要给这块区域添加一个点击，你可能说，加一个绝对定位的 div 块上去，然后给这个 div 块绑定事件就好了。
嗯，对。这是很有效的一种方法。但如果不让用 js 来实现呢？
你可能又想到，那加一个绝对定位的 <a> 标签定位上去就好了。
ok，那要是热点的区域不规则呢？如下图：
好的，你可能会说用 svg 画出不规则区域，再绑定事件。但我们今天来说另一种简单的实现方式：
<map> 和 <area> 标签。
它们支持矩形、圆形、多边形点击热点区域的设置。
代码
注：在浏览器中是无法直观的看到这些点击区域的，我们可以通过切换 tab 键来查看设置的热点区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>maparea</title>
<style>
img {
width: 280px;
height: 510px;
}
</style>
</head>
<body>
<img src="./assets/i/test.jpeg" usemap="#test" />
<map name="test">
<area shape="rect" coords="80 60,180 140" href="#rect" alt="矩形" />
<area shape="circle" coords="125 95,50" href="#rect" alt="圆" />
<area
shape="poly"
coords="120 300,170 380,140 400,95 400,90 320"
href="#rect"
alt="多边形"
/>
</map>
</body>
</html>
属性
<map>
- name ： 给 map 一个名字用来查询，这个属性是必须的，值必须不能为空并且不能带空格。name 属性不准与同文档中的其他 map 元素的值相同，如果 id 属性也被添加， name 属性和 id 属性的值必须相同。
<area>
这里只列出 HTML5 支持的主要属性。
- alt： 在未显示图像的浏览器上显示代替的文本字符串。在 HTML5 中, 这个属性只有在 href 属性被使用的时候才是必需的。
- shape：相关联的热点的形状。
rect，它定义了一个矩形区域；circel，它定义了一个圆形区域；poly，它定义了一个多边形; - coords： 给热点区域设定具体的坐标值。这个值的数值和意义取决于这个值所描述的形状属性。对于矩形或长方形, 这个coords 值为两个X,Y对：左上、右下。 对于圆形, 这个值是 x,y,r ，这里的 x,y 是一对确定圆的中心的坐标而 r 则表示的是半径值.。对于多边和多边形，这个值是用x,y对表示的多边形的每一个点：x1,y1,x2,y2,x3,y3,等等。HTML4里, 值可能是像素数量或者百分比, 区别是不是有%出现; HTML5里, 只可能是像素的数量。
- download：这个属性如果存在的话, 表明作者想把超链接用于下载一个资源。
- href：area的超链接, 值为一个URL。 HTML4里, 这个值不管是不是有值都要明确指定出来. HTML5里则不需要。
- target：本属性指明了在什么地方显示链接的资源。同 a 标签。
- type：该属性指定了用于链接目标的MIME类型的媒体类型。
兼容性
挺好的。从 html4 时代就被遗忘的标签。
4900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
