当前位置： 首页 > news >正文

获取鼠标点击图片时候的坐标，以及利用html 中的useMap 和area 实现图片固定位置的点击事件

news 2026/3/31 20:19:10

一 编写原因

        应项目要求，需要对图片的固定几个位置分别做一个点击事件，响应不同的操作，如下图，需要点击红色区域，弹出不同的提示框：

二 获取点击图片时候的坐标

1. 说明

        实现这以上功能的前提是需要确定需要点击图片的区域坐标，才能实现准确点击。如果不用工具或者代码获取坐标的话，很难拿取到合适的位置。因此，这里就先进行坐标的获取。

2. 获取步骤

        （1） 创建一个html文件，先利用img标签将图片展示在网页上，一定要设置图片（img）的宽高（这里的宽高一定要跟图片响应事件功能代码中的图片宽高一致，切记切记，很重要。）。

        （2） 在img标签中添加一个 ismap 属性（这个属性值默认为true），可以不用赋值。

        （3）这个image外面包一层<a> 标签，或者其他有href 属性的标签（这个是必须的），里面href中的链接可以不写也可以写。

        区别是：如果不写，那么获取的坐标将会显示到当前html链接的后面，如果写了，那获取的坐标会发送到写了的href网页中。

        因此，我这里只想获取坐标，所以，我的href标签为空，不用发送坐标到其他网页。

        （4） 至此代码就写完了。运行代码，展示html页面。如下图：

        （5） 如上图，html展示了图片，这里我们要获取A和B两个位置的坐标。

                ① 获取A坐标：将鼠标放到A上点击一次。可以发现，当前页面的url后面有两个数字，这就是当前鼠标点击的坐标，所以，A点的坐标为（34，9）。

        ② 同样，获取B点坐标，鼠标点击B点，可以发现B的坐标是（108，38）

        综上，A和B的坐标就可以获取到了。这就是坐标获取方式。所以代码如下：

<!DOCTYPE html>
<html>
<body>
<h1>获取鼠标点击图片时的坐标</h1>
<!-- 这里的href可以为空 -->
<a href=""><img style="border: 1px solid red" src="./test.png" width="200" height="400" ismap></a>
</body>
</html>

三 实现图片点击不同位置响应不同事件的功能

        这个功能主要是利用html中的useMap属性和 area属性来实现的。步骤如下：

        1. 正常显示图片：

            这里使用到了img 标签，设置图片路径、useMap属性，以及图片的宽、高（如果利用上面（第二大点）的方式获取坐标的话，这个宽高一定要跟坐标获取界面的宽高一致，切记切记，这个demo中，上面图片的宽高是（200，400），因此这张图片宽高也是设置为（200，400））。代码如下：

<img style="border: 1px solid blueviolet" src="./test.png" width="200" height="400"useMap="#setting">

        2.上面一步设置了useMap属性，那么这一步就用来设置图片的点击区域，这里就需要使用到map标签以及area标签。

        （1）定义一个<map>标签，定义name属性为“setting”（这个setting必须是img标签中的useMap属性值）。

        （2）在<map>标签内容中写area标签，并配置shape、coords属性，以及onclick事件。

         shape（形状）和coords（坐标）是配对使用的，不同的shape配置不同的coords参数。如下所示：

               ①  当 shape为rect（矩形区域），那么coords格式为（x1,y1,x2,y2），x1y1和x2y2分别是矩形左上角和右下角坐标。

                ② 当shape为 poly（多边形区域），那么coords格式为（x1,y1,x2,y2,x3,y3,x4,y4,....）,这些坐标分别是是多边形的顶点坐标。

                ③  shape为circle（圆形区域），那么coords格式为（x1，y1，r），x1y1是圆心坐标，r是半径。

        （3）利用第二大点的方式获取需要的顶点坐标，并配置到area属性中，我这里已经获取出来了，如下图：

A点坐标  39,4;  B点坐标 108,8。

C点坐标  72,290;  D点坐标 35,307;  E点坐标 72,322; F点坐标 110,306。

G点坐标 34,361;  H点坐标 108,389。

配置代码如下：


<map name="setting" }><!-- 点击【开始】区域(整个开始方框框起来的地方)，网页会弹出【开始】字样--><area shape="rect" coords="39,4,108,38" onclick="alert('开始')"/><!-- 点击【满意】区域(整个开始方框框起来的地方)，网页会弹出【满意】字样--><area shape="Poly" coords="72,290,35,307,72,322,110,306" onclick="alert('满意')"/><!-- 点击【结束】区域(整个开始方框框起来的地方)，网页会弹出【结束】字样--><area shape="rect" coords="34,361,108,389" onclick="alert('结束')"/>
</map>

        （4）运行最终结果是，点击【开始】方框，网页弹出“开始”提示信息，点击【满意】区域，网页弹出【满意】提示信息，点击【结束】方框，网页弹出【结束】提示信息。结果如下图：

         备注：因为这张图只涉及了长方形和菱形，那么我们就用rect和poly设置，circle就暂时用不到就不写了，圆形也很简单，知道圆心和半径即可。

四 总结

整个网页代码如下：

<!DOCTYPE html>
<html>
<body>
<h1> 点击图片，弹出不同的提示框</h1>
<img style="border: 1px solid blueviolet" src="./test.png" width="200" height="400"useMap="#setting"><map name="setting" }><!-- 点击【开始】区域(整个开始方框框起来的地方)，网页会弹出【开始】字样--><area shape="rect" coords="39,4,108,38" onclick="alert('开始')"/><!-- 点击【满意】区域(整个开始方框框起来的地方)，网页会弹出【满意】字样--><area shape="Poly" coords="72,290,35,307,72,322,110,306" onclick="alert('满意')"/><!-- 点击【结束】区域(整个开始方框框起来的地方)，网页会弹出【结束】字样--><area shape="rect" coords="34,361,108,389" onclick="alert('结束')"/>
</map></body>
</html>

        

相关文章：

获取鼠标点击图片时候的坐标，以及利用html 中的useMap 和area 实现图片固定位置的点击事件

一 编写原因 应项目要求&#xff0c;需要对图片的固定几个位置分别做一个点击事件&#xff0c;响应不同的操作&#xff0c;如下图&#xff0c;需要点击红色区域&#xff0c;弹出不同的提示框&#xff1a; 二 获取点击图片时候的坐标 1. 说明 实现这以上功能的前提是需要确定需…...

编程日记 2024/1/30 14:40:32

webassembly003 TTS BARK.CPP

TTS task TTS&#xff08;Text-to-Speech&#xff09;任务是一种自然语言处理&#xff08;NLP&#xff09;任务&#xff0c;其中模型的目标是将输入的文本转换为声音&#xff0c;实现自动语音合成。具体来说&#xff0c;模型需要理解输入的文本并生成对应的语音输出&#xff0…...

编程日记 2024/1/30 14:35:25

HiveSQL题——排序函数(row_number/rank/dense_rank)

一、窗口函数的知识点 1.1 窗户函数的定义 窗口函数可以拆分为【窗口函数】。窗口函数官网指路&#xff1a; LanguageManual WindowingAndAnalytics - Apache Hive - Apache Software Foundationhttps://cwiki.apache.org/confluence/display/Hive/LanguageManual%20Windowin…...

编程日记 2024/1/30 14:34:23

【C语言】（9）分支结构

一.if-else 语句 if-else 适用于简单和复杂的条件判断。 a. 基本 if 语句 用途&#xff1a;基本的条件测试。语法&#xff1a;if (condition) {// 代码块 }示例&#xff1a;if (score > 60) {printf("及格\n"); }b. if-else 语句 用途&#xff1a;二选一的条件…...

编程日记 2024/1/30 14:33:22

Flink 集成 Debezium Confluent Avro ( format=debezium-avro-confluent )

博主历时三年精心创作的《大数据平台架构与原型实现：数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行，点击《重磅推荐：建大数据平台太难了！给我发个工程原型吧！》了解图书详情，京东购书链接：https://item.jd.com/12677623.html，扫描左侧二维…...

编程日记 2024/1/30 14:31:19

R语言(数据导入，清洗，可视化，特征工程，建模)

记录一下痛失的超级轻松的数据分析实习&#xff08;线上&#xff09;&#xff0c;hr问我有没有相关经历&#xff0c;我说我会用jupyter book进行数据导入&#xff0c;清洗&#xff0c;可视化&#xff0c;特征工程&#xff0c;建模&#xff0c;python学和用的比较多&#xff0c;…...

编程日记 2024/1/30 14:28:14

springboot 整合 Activiti6

1.添加maven依赖 <dependency><groupId>org.activiti</groupId><artifactId>activiti-spring-boot-starter-basic</artifactId><version>6.0.0</version> </dependency>2.添加配置 spring:activiti:check-process-definitio…...

编程日记 2024/1/30 14:27:13

微信小程序canvas画布实现直线自由缩放、移动功能

目录 实现效果 一、获取画布信息并绘制背景 二、绘制直线...

编程日记 2024/1/30 14:26:12

Cesium数据加载

文章目录 0.引言1.影像加载1.1Bing地图1.2天地图1.3ArcGIS在线地图1.4高德地图1.5OSM影像1.6MapBox影像 2.OGC地图服务2.1WMS2.2WMTS2.3TMS 3.GeoJSON数据加载4.KML数据加载5.TIFF数据加载6.点云数据加载7.地形数据加载7.1在线地形数据加载7.2本地地形数据加载 8.倾斜摄影模型数…...

编程日记 2024/1/30 14:24:09

【C++历练之路】探秘C++三大利器之一——多态

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; 前言&#x1f354;: 在计算机科学的广袤领域中&#xff0c;C多态性是一门令人着迷的技术艺术&#xff0c;它赋予我们的代码更强大的灵活性和可维护性。想象一下&#xff0c;你正在构建一个程序&#xff0c;需要适应不断…...

编程日记 2024/1/30 14:22:06

业务逐字稿

1.WEB端旅游线路发布模块 旅游公司在Web端点击新增旅游线路按钮&#xff0c;浏览器请求发送到Nginx&#xff0c;Nginx反向代理到网关&#xff0c;网关去找微服务&#xff0c;微服务实现具体的旅游线路发布功能 旅游公司工作人员在Web端点击新增旅游线路按钮&#xff0c;浏览器…...

编程日记 2024/1/30 14:20:04

微服务舞台上的“三步曲“：Spring Cloud 服务注册、服务发现与服务调用

在当今软件开发的舞台上&#xff0c;微服务架构已然成为引领潮流的主角。而在这场微服务的大戏中&#xff0c;Spring Cloud 以其强大的工具集成为关键演员&#xff0c;为我们呈现了一个完美的"三步曲"&#xff1a;服务注册、服务发现与服务调用。 第一步&#xff1a…...

编程日记 2024/1/30 14:19:04

中间件

在 Java 开发中&#xff0c;中间件是指位于应用程序和操作系统之间的软件层&#xff0c;它提供了一些通用的功能和服务&#xff0c;帮助简化开发和部署过程&#xff0c;提高系统的可靠性、性能和可扩展性。 常见的 Java 中间件包括&#xff1a; 1.应用服务器&#xff08;Appl…...

编程日记 2024/1/30 14:16:01

4D毫米波雷达——ADCNet 原始雷达数据 目标检测与可行驶区域分割

前言 本文介绍使用4D毫米波雷达&#xff0c;基于原始雷达数据&#xff0c;实现目标检测与可行驶区域分割&#xff0c;它是来自2023-12的论文。 会讲解论文整体思路、输入分析、模型框架、设计理念、损失函数等&#xff0c;还有结合代码进行分析。 论文地址&#xff1a;ADCNe…...

编程日记 2024/1/30 14:13:59

「优选算法刷题」：提莫攻击

一、题目 在《英雄联盟》的世界中&#xff0c;有一个叫 “提莫” 的英雄。他的攻击可以让敌方英雄艾希&#xff08;编者注&#xff1a;寒冰射手&#xff09;进入中毒状态。 当提莫攻击艾希&#xff0c;艾希的中毒状态正好持续 duration 秒。 正式地讲&#xff0c;提莫在 t 发…...

编程日记 2024/1/30 14:12:58

260：vue+openlayers 通过webgl方式加载矢量图层

第260个 点击查看专栏目录 本示例介绍如何在vue+openlayers中通过webgl方式加载矢量图层。在做这个示例的时候，采用vite的方式而非webpack的方式。这里的基础设置需要改变一下。 ol的版本7.5.2或者更高。 直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果 文…...

编程日记 2024/1/30 14:10:55

Android 8.1 相关修改

一些常用修改&#xff0c;做个记录&#xff0c;为了节约时间和防止踩坑。 一、修改默认中文 修改位置&#xff1a; build\make\target\product\full_base.mk 修改内容&#xff1a; # Put en_US first in the list, so make it default. PRODUCT_LOCALES : zh_…...

编程日记 2024/1/30 14:09:54

EG-2121CA (晶体振荡器 低抖动表面声波(SAW)振荡器)

在当今高度数字化的时代&#xff0c;稳定的信号传输显得尤为重要。若要实现信号的稳定传输&#xff0c;晶体振荡器必不可少。EG-2121CA&#xff0c;它是一款低抖动表面声波&#xff08;SAW&#xff09;振荡器设计的产品&#xff0c;凭借其出色的频率范围、稳定的电源电压和可靠…...

编程日记 2024/1/30 14:07:52

Django知识随笔

目录 1.如何再ajax中传输post数据&#xff1f; 2.在form表单中使用jquery序列化&#xff0c;input框过多。 1.如何再ajax中传输post数据&#xff1f; 在ajax传递的那个网址&#xff0c;会调用你路由的视图函数&#xff0c;在视图函数上面加一句 csrf_exempt 。写上之后会有提…...

编程日记 2024/1/30 14:06:51

Facebook 广告帐户：多账号运营如何防止封号？

Facebook目前是全球最受欢迎的社交媒体平台之一&#xff0c;拥有超过27亿活跃用户。因此&#xff0c;它已成为个人和企业向全球受众宣传其产品和服务的重要平台。 然而&#xff0c;Facebook 制定了广告商必须遵守的严格政策和准则&#xff0c;以确保其广告的质量和相关性&…...

编程日记 2024/1/30 14:04:50

无需配置环境！MinerU镜像一键部署，即刻体验智能文档解析

无需配置环境&#xff01;MinerU镜像一键部署&#xff0c;即刻体验智能文档解析 1. 为什么选择智能文档解析&#xff1f; 在日常办公和学习中&#xff0c;我们经常需要处理各种文档资料&#xff1a;PDF报告、扫描合同、学术论文、财务报表等。传统方式要么需要手动输入&#…...

编程新知 2026/3/31 20:11:42

从省赛失误到国赛精进：十五届蓝桥杯EDA组PCB布局实战复盘与优化

1. 省赛翻车现场&#xff1a;一个封装错误引发的惨案 去年省赛那天&#xff0c;我永远记得提交作品前那种胸有成竹的感觉。直到成绩公布看到省二的结果&#xff0c;才发现自己犯了个低级错误——数码管封装绑定错了。打开设计文件一看&#xff0c;本该是标准尺寸的数码管&#…...

编程新知 2026/3/31 18:52:19

2025年深度评测：掌握Liebling主题，解锁Ghost博客的现代设计潜力

2025年深度评测&#xff1a;掌握Liebling主题&#xff0c;解锁Ghost博客的现代设计潜力 【免费下载链接】liebling Beautiful and clean Ghost theme that is easy and comfortable to use. To get the latest version please head over the releases page &#x1f449;&#…...

编程新知 2026/3/31 18:40:11

input-overlay多语言支持：如何为全球观众轻松定制直播输入显示

input-overlay多语言支持&#xff1a;如何为全球观众轻松定制直播输入显示 【免费下载链接】input-overlay Show keyboard, gamepad and mouse input on stream 项目地址: https://gitcode.com/gh_mirrors/in/input-overlay 想要让全球观众都能轻松理解你的游戏操作吗&a…...

编程新知 2026/3/31 17:57:34

如何快速实现Tale博客系统国际化：多语言博客搭建完整指南

如何快速实现Tale博客系统国际化&#xff1a;多语言博客搭建完整指南 【免费下载链接】tale &#x1f984; Best beautiful java blog, worth a try 项目地址: https://gitcode.com/gh_mirrors/ta/tale Tale博客系统是一款优雅的Java博客程序&#xff0c;提供了强大的内…...

编程新知 2026/3/31 17:37:27

告别重复造轮子：用快马AI一键生成高复用性imToken集成代码模块

告别重复造轮子&#xff1a;用快马AI一键生成高复用性imToken集成代码模块 开发涉及钱包集成的DApp时&#xff0c;最让人头疼的就是那些重复性的基础代码。每次新项目都要重新写一遍连接钱包、处理授权、监听网络切换的逻辑&#xff0c;不仅浪费时间&#xff0c;还容易引入安全…...

编程新知 2026/3/31 16:42:21

亿芸甄选商业模式系统开发

亿芸甄选商业模式系统开发&#xff1a;数字化驱动的新零售增长引擎在新零售行业加速数字化转型的背景下&#xff0c;亿芸甄选凭借其创新的商业模式与技术架构&#xff0c;成为美业等细分领域的增长。该系统以“级差分红智能运营”为核心&#xff0c;通过多层次激励机制与数字化…...

编程新知 2026/3/31 16:05:45

Realistic Vision V5.1效果展示：这些惊艳的人像作品都是AI生成的

Realistic Vision V5.1效果展示&#xff1a;这些惊艳的人像作品都是AI生成的 1. 当AI画师遇上专业摄影师 你有没有见过这样的AI生成人像&#xff1f;皮肤纹理清晰到能看见毛细血管&#xff0c;发丝在阳光下呈现自然的半透明质感&#xff0c;眼神光的位置精准符合物理反射规律…...

编程新知 2026/3/31 15:49:30

Phi-3-mini-4k-instruct-gguf实战教程：开箱即用的轻量中文问答部署指南

Phi-3-mini-4k-instruct-gguf实战教程&#xff1a;开箱即用的轻量中文问答部署指南 1. 认识Phi-3-mini-4k-instruct-gguf Phi-3-mini-4k-instruct-gguf是微软Phi-3系列中的轻量级文本生成模型GGUF版本。这个模型特别适合处理中文问答、文本改写、摘要整理以及简短创作等任务。…...

编程新知 2026/3/31 15:25:12

pvr.iptvsimple技术解构：IPTV直播系统构建的底层逻辑与实践指南

pvr.iptvsimple技术解构&#xff1a;IPTV直播系统构建的底层逻辑与实践指南 【免费下载链接】pvr.iptvsimple IPTV Simple client for Kodi PVR 项目地址: https://gitcode.com/gh_mirrors/pv/pvr.iptvsimple 问题定位&#xff1a;IPTV直播系统的技术痛点与架构挑战 IP…...

编程新知 2026/3/31 15:18:38