前端点击图片的某个区域进行映射

水深无声 2023-07-08 14:27 8阅读 0赞

### 导航栏 ###

*   *   *  一：点击图片然后进行映射进行你想要的操作
         *  二：如何知道你点击位置图片的XY坐标？

--------------------

### 一：点击图片然后进行映射进行你想要的操作 ###

比如现在UI同事给了你一张图【如下】，让你在点击这个图的每一个行星的时候进行页面跳转。  
![在这里插入图片描述][20200226201320876.png]  
那么首先我们先引入这个图片：

请注意一个特殊的属性：usemap。翻译成中文就是使用地图。其实map在html当中也是一个标签。我们想要在点击图片的某个区域进行跳转或者其他操作的时候就会关联到这个上面【你用js去计算不闲麻烦的话也可以】。

**接下来我们来看这个map标签是怎么被img标签usemap关联上的。**

> 根据上面代码我们就可以很清楚的知道了是通过map标签的name属性与img标签的usemap保持一致而后关联上的【注意：img标签前面要加\#号】  
> 然后我们现在在学习一下这些英文单词，这样能对我们对这个map标签和area标签使用的更加顺手：  
> area：区域的意思  
> shape：形状的意思  
> coords：坐标的意思  
> 那么我们根据它的这个就可以猜出：  
> 1.首先img需要与map关联起来  
> 2.map里的子标签area是用来说明点击范围然后要做什么事情的  
> 3.shape是需要你说明你要点击的范围是什么形状【可选参数：rect(矩形)、circle(圆形)、poly(多边形)】  
> 4.coords是需要你说明你要点击的形状他的坐标、半径参数。不同的形状coords传入的参数意义不同。具体如下：  
> 1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))  
> <area shape=“rect” coords=“x1,y1,x2,y2” href=url>  
> 2、圆形：(圆心坐标为(X1,y1)，半径为r)  
> <area shape=“circle” coords=“x1,y1,r” href=url>  
> 3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) …)  
> <area shape=“poly” coords=“x1,y1,x2,y2 …” href=url>

当然现在很少有用这个进行跳转的了，大部分的需求都是点击某个区域进行xxx事情。所以，我们给他一个href属性：“javascript:;”，然后在给这个area加个点击事件即可~如下所示：

> 建议朋友们自己搞一个图片做个小demo玩一玩。就熟悉了。

<img src="./20200226201320876.png" width="145" height="126" alt="" usemap="#map">
    <map name="map">
        <area shape="rect" coords="0,0,82,126" href="javascript:;" alt="hah" onclick="areaClick()">
    </map>
    <script> function areaClick(){ alert('哇哦!!!') } </script>

### 二：如何知道你点击位置图片的XY坐标？ ###

思路很简单：

1.  在你的img标签里面加一个ismap=“ismap”
2.  在img的外面加一个a标签包起来

具体代码如下：

最后结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]

> 需要注意的点：
> 
> 1.  如果你的img使用了usemap属性，那么你就不能使用ismap属性去查看你点击的坐标了。所以建议大家先使用ismap属性了解到了你要点击的x，y坐标之后再使用usemap属性实现你的功能。

[20200226201320876.png]: https://img-blog.csdnimg.cn/20200226201320876.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200303222450481.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA==,size_16,color_FFFFFF,t_70