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

导航栏

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

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

比如现在UI同事给了你一张图【如下】，让你在点击这个图的每一个行星的时候进行页面跳转。

那么首先我们先引入这个图片：

<img src="planets.png" alt="Planets" usemap="#planetmap">

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

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

<map name="planetmap"><area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"><area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"><area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

根据上面代码我们就可以很清楚的知道了是通过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坐标？

思路很简单：

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

具体代码如下：

<a href="#"><img src="./xxx.png" alt="" ismap="ismap" />
</a>

最后结果：

需要注意的点：

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

前端点击图片的某个区域进行映射相关推荐

前端点击图片，图片放大
需要依赖js <script src="/js/photoswipe.min.js"></script><script src="/js/p ...
前端点击图片将跳出显示框显示图片
该写法是在easy UI框架下所用! 主要的功能就是点击详情时候跳出一个显示框将服务器中的PDF文件显示出来. 后台数据库中存储的是已经上传了的文件路径!如果去掉<th>中的formatt ...
jquery粘贴按钮_实现前端点击按钮自动复制剪贴板功能
[目录] 明确需求 html分析代码实现 css分析 js分析代码实现只要是文本,长按选中就可以复制,但是需求来了挡也挡不住: 明确需求为了提升用户体验,点击[复制]按钮就自动复制到剪贴板,那 ...
手机端点击图片全屏预览
<!doctype html> 手机端点击图片全屏预览 <div class="category"><img src="1.jpg" ...
手机端点击图片放大特效-PhotoSwipe插件
PhotoSwipe插件官方网站 http://www.photoswipe.com/ PhotoSwipe插件能实现手机端点击图片全屏放大再双击图片放大等功能但有一点不太好的是图片放大后再单击不 ...
前端点击按钮打印Excel
前端点击按钮打印Excel 实现思路太长不看版后端spire.xls将excel转为html,前端打印iframe 具体说明前端只能打印html文档已有的dom节点,无法直接打印Excel,那么 ...
前端点击移动生成小爱心
前端点击移动生成小爱心我之前看见一个博客,鼠标点击的时候会有不同颜色的小爱心出现,我就心血来潮试着写了一下,并且加了鼠标移动也会产生小爱心,放在这里目的是以后万一我要用方便找,写的不好请海涵. &l ...
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
今天找到了一个我用了很好的方法,点击缩略图,放大居中展示,且参数可调,亲测可靠. 代码使用意见,将下面的代码放到本地测试效果,可以用一张自己的照片,点击会放大,再次点击还原. 一.需求点击图片查看 ...
html点击小图标显示全屏查看大图,基于JavaScript实现移动端点击图片查看大图点击大图隐藏...
一.需求点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 二.代码 JQuery点击图片查看大图by starof .exampleImg { height:100 ...

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

导航栏

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

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

前端点击图片的某个区域进行映射相关推荐

最新文章

热门文章