HTML中点击图片不同区域触发不同事件 图片定位

最新推荐文章于 2024-04-06 22:53:31 发布
最新推荐文章于 2024-04-06 22:53:31 发布
阅读量1.3w 收藏 59
点赞数 16
分类专栏： h5 文章标签： html5 html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangfeijiu/article/details/106563204
版权

HTML图片映射定位

在一张图片上，点击不同部分区域触发不同事件。

其实就是根据一张已知像素大小的图片，以其左上角作为远点坐标，建立一个右下方向为正轴的二维坐标系。然后建立矩形，圆形等区域并绑定href属性或者其他js事件即可。

具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	
		<!-- usemap 将图像定义为客户器端图像映射 -->
		<img src="img/planets.gif" width="145" height="126" alt="planets" usemap="#plantmap"/>
		
		<!-- map 客户端图像映射器。通过img标签的usemap与map的name绑定 -->
		<map name="plantmap">
			<!-- area 定义图像映射中的区域 -->
			<area shape="rect" coords="0,0,82,126" alt="Sun" href="http://www.baidu.com" target="_blank"/>
			<area shape="circle" coords="90,58,3" alt="Mercury" href="http://www.163.com" target="_parent"/>
			<area shape="circle" coords="124,58,3" alt="Venus" href="http://www.qq.com" target="_top"/>
		</map>
	</body>
</html>

部分代码讲解：
矩形两点定坐标，圆形一点定坐标，起始坐标为（0，0），也就是图片左上角

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>

效果图：
在这里插入图片描述

Free Joe
关注
  • 16
    点赞
  • 踩
  • 59
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
ie6和ie7中的链接图片点不中问题讨论
09-25
在标题和描述中提到的情况，涉及到在一个`<a>`标签内嵌套`<span>`标签，并且`<span>`内部包含一个`<img>`图片，以期望文字和图片都能响应点击事件。 正常的HTML结构中，`<a>`标签通常用来包裹文本或图片，以定义...
如何实现在一张图片上的某个区域做到点击事件？div+css的布局较table布局有什么优点?
星辰迷上大海的博客
01-07 1273
改版更方便，只需要修改CSS文件即可更改样式。 页面加载速度更快、页面显示更简洁。 结构清晰，表现和结构分离。 对搜索引擎更友好,有利于搜索引擎爬虫。易于搜索引擎优化,排名可能更高。
html中绑定点击事件的三种方法
cdd9527的博客
11-30 1万+
html中绑定点击事件的三种方法
html中image 区域点击的优点
最新发布
qq_31397725的博客
04-06 562
通过图像区域的点击，可以提供更加丰富和动态的用户体验。例如，可以创建一个具有吸引力的幻灯片展示，用户通过点击图片来切换不同的视图或内容，这使得网页更加生动和有趣。总之，HTML中的图像区域点击提供了一种直观、互动和多功能的方式，可以增强用户体验，提高参与度，并有助于实现网站的各种目标。：通过为图像添加适当的alt文本和键盘导航支持，可以确保所有用户，包括视觉障碍人士，都能够理解图像内容并与之交互。：在响应式网页设计中，图像可以被设计为响应用户的点击和触摸操作，从而在不同设备上提供一致的用户体验。
前端：实现点击图片某个部位跳转（位图）
fuyuo的博客
06-14 5889
实现点击图片某个部位跳转（位图）以及需要实现这个功能的一些标签介绍
vue项目 使用svg渲染地图 并添加点击事件，下拉框选中区域，动态改变地上对应区域的背景颜色（按百分比渲染背景颜色）
蓝胖子的博客
06-30 3341
vue项目 使用svg渲染地图 并添加点击事件，下拉框选中区域，动态改变地上对应区域的背景颜色（按百分比渲染背景颜色）
html点击图片某区域进行操作
瑶少的博客
03-07 7145
html开发中可能会需要用到点击一张图片的某区域进行跳转操作。例子如下：   &lt;img   src= "../Images/img.gif "   width= "777 "   height= "100 "   border= "0 "   usemap= "#Map "&gt; &lt;map   name= "Map "&gt;     &
android html图片点击事件,Android TextView加载HTMl图文之添加点击事件和查看图片
weixin_34457571的博客
05-27 728
前言用TextView显示Html图文，每一个需求都是需要探索的，不再是简单的添加点击事件就可以了。1、如何添加点击事件这里要使用上在Html.forHtml()方法中的第四个参数：Html.TagHandler。顾名思义就是标签处理的类。charSequence = Html.fromHtml(article.getContent(), Html.FROM_HTML_MODE_LEGACY, n...
HTML之图像地图将图片分成不同区域，在不同区域上做跳转链接，即点击图片的不同区域让它跳转至不同链接
angrynouse的博客
10-29 1827
点击图片不同区域实现页面跳转，以及多边形的坐标的测量方法
图片Slider 带左右按钮的js示例
10-26
最后，如果设置为自动播放，我们使用`setInterval`创建一个定时器，每隔一定时间自动触发“next”按钮的点击事件。当鼠标悬停在滑动区域上时，用`hover`方法暂停定时器，鼠标离开时重新启动。 这个简单的图片Slider...
jQuery实现图片滑动效果
10-20
总结来说，实现jQuery图片滑动效果的关键在于利用事件处理（如`hover`）和动画功能（可能通过`animate()`方法），结合CSS布局和定位，创建出动态的、吸引用户的视觉体验。这个过程涉及多个技术层面，包括DOM操作、...
用图片替换checkbox原始样式并实现同样的功能
10-17
同时，设置`checkbox`的宽高与图片`div`相同，确保点击区域与图片一致。为了使`checkbox`不可见，我们将它的`opacity`设为0，如下所示： ```css .box1 { position: relative; } .box2 { position: absolute; /*...
Jquery实现图片左右自动滚动示例
10-26
示例中的HTML代码创建了一个包含图片的容器（`.ibox`），内部有一个绝对定位的`.showbox`元素，用于容纳要滚动的图片列表（`<ul><li><img/></li></ul>`）。`<span>`元素用于添加导航按钮，如“上一张”（`.pre`）、...
如何完成在一个图片中，点击不同区域显示不同的结果
缭绕
09-09 5497
事例： 如上图，是一个图片，若想点击上面三个专区会有不同的效果可以如此编写代码：               FPMap_inctop">                                                                                       #FPMap_inctop" border="0"
Web自动化测试之playwright：Web元素定位
测试开发小记
11-11 8145
要对web页面进行控制，首先需要定位到页面对应的元素，和Selenium一样，playwright也支持多种元素定位方法，下面来介绍它支持的元素选择器。 目录Text 定位属性值定位xpath定位css selector 定位CSS常规用法定位可见元素伪类：`:has() `伪类：`:is() `通过页面布局定位元素组合定位定位第n个元素：`:nth-match()`完整测试代码总结 playwright主要的选择器: Locator Description text 文本值 css s
[微信小程序]在图片上的特定区域点击实现功能
wahzx的博客
09-26 1929
点击地图上的特定区域进行跳转或执行其他操作
实现点击图片不同区域响应不同的事件
weixin_34334744的博客
07-08 929
最近有一个遥控器的项目, 需要实现点击图片上指定位置响应不同事件 图片如下: 大概目的是点击图片上的温度可以直接改变空调温度 大概思路就是先通过gesture获取点击的点坐标, 然后对坐标做处理. 开始考虑以纵轴为0度, 计算点击坐标跟中心点连线并计算跟纵轴的角度来判断, 不过代码写好后发现在不同的设备上有误差 所以就改用将图片分成一个个的格子, 然后判断触摸点在哪一个格子上面 ...
HTML点击一张图片不同地方跳转不同页面
热门推荐
后生丶的博客
05-21 1万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;点击图片不同地方跳转不同页面&lt;/title&gt; &lt;/head&gt; &lt;body&gt; /// 打开页面显示的图片 &am
html图片定义可点击区域,HTML - 可点击区域
weixin_28951347的博客
06-09 1558
对于我的导航栏，我将如何使“Arc Studios”文本可点击。HTML - 可点击区域这是代码;Arc Studios那么如何制作可点击的链接并将CSS添加到文本中呢？.menu,.menu ul,.menu li,.menu a {margin: 0;padding: 0;border: none;outline: none;}.menu {margin-top: -8px;height: 5...
javascript点击图片放大
07-14
在 JavaScript 中实现点击图片放大可以通过以下步骤进行： 1. HTML 结构：在 HTML 中，你需要有一个包含图片的容器元素（例如 div）和一个用于显示放大图片的元素（例如 img 或 div）。给图片添加一个点击事件监听器，以便在点击时触发放大效果。 ```html <div id="imageContainer"> <img src="小图片.jpg" alt="图片" id="smallImage"> </div> <div id="zoomedImageContainer"> <img src="大图片.jpg" alt="放大图片" id="zoomedImage"> </div> ``` 2. CSS 样式：使用 CSS 来设置图片容器和放大图片的样式，并将放大图片隐藏起来。 ```css #imageContainer { position: relative; } #zoomedImageContainer { position: absolute; top: 0; left: 0; display: none; } #zoomedImageContainer img { width: 100%; height: auto; } ``` 3. JavaScript 事件处理：使用 JavaScript 来处理点击事件，当点击小图片时，显示放大图片，并根据鼠标位置进行定位。 ```javascript // 获取元素 const smallImage = document.getElementById("smallImage"); const zoomedImageContainer = document.getElementById("zoomedImageContainer"); // 添加点击事件监听器 smallImage.addEventListener("click", function() { // 显示放大图片 zoomedImageContainer.style.display = "block"; // 设置放大图片的位置 const smallImageRect = smallImage.getBoundingClientRect(); zoomedImageContainer.style.top = smallImageRect.top + "px"; zoomedImageContainer.style.left = smallImageRect.right + "px"; }); // 点击放大图片外的区域，隐藏放大图片 document.addEventListener("click", function(event) { if (!zoomedImageContainer.contains(event.target) && event.target !== smallImage) { zoomedImageContainer.style.display = "none"; } }); ``` 这样，当用户点击小图片时，放大图片会显示在其旁边，再次点击放大图片外的区域，放大图片会隐藏起来。你可以根据实际需求对样式和代码进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值