干什么用的
<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
时代就被遗忘的标签。