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

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

news 2025/11/1 9:07:55

一 编写原因

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

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

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

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2025/10/27 15:21:40

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2025/10/28 22:51:20

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2025/6/16 23:36:50

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/9/22 18:49:24

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2025/10/28 6:00:57

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

编程新知 2025/10/28 22:03:45

十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建 前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...

编程新知 2025/9/24 1:06:11

Neko虚拟浏览器远程协作方案：Docker+内网穿透技术部署实践

前言&#xff1a;本文将向开发者介绍一款创新性协作工具——Neko虚拟浏览器。在数字化协作场景中&#xff0c;跨地域的团队常需面对实时共享屏幕、协同编辑文档等需求。通过本指南&#xff0c;你将掌握在Ubuntu系统中使用容器化技术部署该工具的具体方案&#xff0c;并结合内网…...

编程新知 2025/10/31 12:10:04