从阿里一道面试题，展开讲解image图像映射

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

面试题

在一个 100x100 像素图像的正中间定义了一个圆形区域，半径为5px。
实现图片的中心圆形区域可点击跳转到https://wangxiaokai.vip，图片的其他区域不可点击。

背景知识-图像映射

图像映射，指带有可点击区域的图像。
map和img标签同时使用，可定义图像映射，指定的区域可点击。

实现图像映射需要什么物料？

需要借助3个HTML标签：

img
map
area

map标签

map标签可定义客户端图像映射

属性	是否必须	作用
id	是	为 map 标签定义唯一的名称。
name	否	为 image-map 规定的名称。

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

area标签

area标签定义图像映射中的区域

属性	取值	作用
coords	坐标	定义可点击区域（对鼠标敏感的区域）的坐标。
href	url	定义此区域的目标 URL。
shape	default, rect ,circle, poly	定义区域的形状。
target	`_blank`, `_parent`, `_self`, `_top`	规定在何处打开 href 属性指定的目标 URL。
alt	text	定义此区域的替换文本。

coords属性

coords 属性规定区域的 x 和 y 坐标。

coords 属性与shape 属性配合使用，来规定区域的尺寸、形状和位置。

图像左上角的坐标是 "0,0"。

圆形：shape="circle"，coords="x,y,r"

这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以像素为单位的圆形半径。

多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."

每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。

多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。

矩形：shape="rectangle"，coords="x1,y1,x2,y2"

第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0" 是图像左上角的坐标。
请注意，定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。

img标签链接map

<img>标签，使用usemap属性，来指定map（热点地图）。 usemap属性通常引用 <map>中的 id 或 name 属性（取决于浏览器），进行链接。

解答

60分答案

使用覆盖一层透明的元素，并使用js绑定点击事件，作为响应。

<style>
.wrap{
	position:relative
}
.click{
	width: 10px;
	height: 10px;
	
	position:absolute;
	top:50%;
	left:50%;
	margin-left: -5px;
	margin-top:-5px;
	border-radius:50%;
	overflow:hidden;
}
</style>

<div class="wrap">
	<img src ="demo.png" width="100" height="100" alt="demo" />
	<div class="click" id="click"></div>
</div>

<script>
document.getElementById('click').addEventListener = function(){
	location.href = 'https://wangxiaokai.vip';
}
</script>

80分答案

在60分答案的基础上，使用<a>标签的特性，作点击事件的响应。

<style>
.wrap{
	position:relative
}
.click{
	width: 10px;
	height: 10px;
	
	position:absolute;
	top:50%;
	left:50%;
	margin-left: -5px;
	margin-top:-5px;
	border-radius:50%;
	overflow:hidden;
}
</style>

<div class="wrap">
	<img src ="demo.png" width="100" height="100" alt="demo" />
	<a class="click" href="https://wangxiaokai.vip" target="_blank"></a>
</div>

满分答案

使用图像映射，精准实现点击区域可点击。
其中，coords的取值含义:
在 100x100 像素图像的正中间，坐标(x, y) = (50, 50)，半径为5。

<img src ="demo.png" width="100" height="100" alt="demo" usemap ="#vipmap" />

<map id="vipmap" name="vipmap">
  <area shape="circle" coords="50,50,5" href="https://wangxiaokai.vip" alt="cool" />
</map>

坚持原创，输出有价值的文章！

同学，如果文章有帮助到你，请通过以下方式给笔者反馈：

收藏的同时，不要忘记给本文点个赞👍
GitHub 点个✨star✨

最近笔者在整理第一本电子书书稿《前端面试手册》，有兴趣的同学可以点个✨star✨关注下