为图片部分区域添加点击事件

已于 2023-08-25 16:30:50 修改
阅读量816 收藏 2
点赞数
文章标签： dubbo ajax redis
于 2023-08-25 16:28:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68500359/article/details/132497923
版权

代码如下： 

<!DOCTYPE html>
<html>
<head>

</head>
<body>


<p>请点击图像上的小羊，跳转至百度。</p>
 
<img
src="https://www.eddyliu.cn/static/images/favicon.png"
border="0" usemap="#planetmap"
alt="Planets"
height="200" width="200"/>
 
<map name="planetmap" id="planetmap">
 
 
<area id="sunArea" shape="rect" coords="50,101,80,140" href=""   />

 
</map>
 

</body>
<script>
var sunArea = document.getElementById("sunArea");

sunArea.addEventListener("click", function() {
  // 在这里编写您的点击事件处理程序
  
  // 例如，您可以在新窗口中打开链接
  window.open("https://www.baidu.com/", sunArea.target);
});
</script>
</html>

shape="rect"，属性表示：矩形区域（还有圆形和多边形具体可以查w3c）；

coords="x1,y1,x2,y2"，属性表示：（x1,y1）矩形为左上角顶点坐标，（x2,y2）为对角顶点。

 演示如下：

Eddy526
关注
HarmonyOS（鸿蒙）——单击事件
Java框架、并发编程、分布式、微服务、Redis、HarmonyOS、中间件等技术
08-03 3万+
目录 一、简介 1.1 什么是组件 1.2 什么是事件 1.3 什么是单击事件 1.4 实现步骤 二、案例 2.1 创建项目 2.2 定义组件 2.3 定义的组件绑定单击事件 2.4 实现ClickedListener接口并重写onClick方法 2.5 实现onClick方法中的具体逻辑，以此完成点击事件的相关业务操作 三、测试 3.1 登录远程模拟器 3.2 运行项目 四、精选好文 一、简介 1.1 什么是组件 组件就是文本、按钮、图片等元素的统称 1.2 什么是事
html页面图片可点击事件,html中如何给图片添加点击事件的详解
weixin_35448391的博客
06-03 6589
首先使用jQuery选择器获取到想要绑定click事件的img元素，然后可以直接绑定click方法，也可以通过bind方法绑定。这里详细介绍一下bind方法。jQuery 事件 - bind() 方法 —— 定义和用法bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。jQuery 事件 - bind() 方法 ——将事件和函数绑定到元素规定向被选元素添加的一个或多...
在图片上点击一个区域触发这个区域的事件
dianpi2993的博客
02-04 1193
一：效果，放到图片上会显示文字，单击触发一个事件 二：实现原理 将两张图片重合，点击是另一张图片，如下图，根据颜色来判断点击的是那个图片对象 三：代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using Sys...
HTML图片的点击事件
热门推荐
zhufengy的博客
05-11 2万+
设置style="CURSOR: hand" 和onclick两个属性即可&lt;img src="images/user-photo.png"，style="CURSOR: hand" onclick='window.open("http://www.baidu.com")'&gt;
如何实现在一张图片上的某个区域做到点击事件？div+css的布局较table布局有什么优点?
星辰迷上大海的博客
01-07 1832
改版更方便，只需要修改CSS文件即可更改样式。 页面加载速度更快、页面显示更简洁。 结构清晰，表现和结构分离。 对搜索引擎更友好,有利于搜索引擎爬虫。易于搜索引擎优化,排名可能更高。
swift-一行代码添加文本点击事件(swfit版本)
08-15
在Swift编程语言中，为文本添加点击事件通常是通过创建自定义的`UILabel`子类或者使用`UITapGestureRecognizer`配合`NSAttributedString`来实现的。这里我们将深入探讨如何在Swift中使用一行代码来为文本添加点击...
给html添加鼠标事件监听事件吗,6.3 为区域附加鼠标事件监听器 - HTML5 Canvas 实战...
weixin_35240068的博客
06-07 617
本节，我们将进入Events类的重点部分：定义区域，并为它们添加事件监听器。我们将绘制一个三角形，并附加mouseout和mousemove事件，再绘制一个矩形，没有事件监听器，最后绘制一个圆形，并附加mouseover、mouseout、 mousedown和mouseup来测试Events所支持的每一个桌面事件。图6-2 添加鼠标事件监听器操作步骤按照以下步骤，绘制一个三角形、一个矩形和一个...
opencv利用矩形框选中某一区域并保存为新图片
08-26
本篇将详细讲解如何使用OpenCV的矩形框功能选中图像的一部分，并将该部分保存为新的图片。 首先，我们需要引入必要的OpenCV库，如`opencv2/highgui/highgui.hpp`、`opencv2/core/core.hpp`和`opencv2/imgproc/...
js 动态获取图片矩形热区，并在热区上添加蒙版，鼠标经过，以半透明形式显示该区域
01-14
JavaScript（简称JS）是一种广泛用于Web开发的轻量级脚本语言，它可以在客户端运行，为网页添加交互性。在本场景中，我们讨论的是如何使用JavaScript动态地在图片上生成矩形热区，并在热区上添加蒙版效果。热区...
Android中EditText的drawableRight属性设置点击事件
09-01
总之，通过使用 `drawableRight` 属性并自定义触摸监听器，我们可以在 `EditText` 的右侧图标上添加点击事件，实现各种交互功能，提高用户体验。这种方法是Android开发中解决此类问题的一种常见实践。
js图片区域点击，适用于移动端
08-16
js实现图片区域点击，适用于移动端，可以自定义区域进行操作点击，非canvas实现代码比较简单清晰！！！
Unity给图片添加点击事件
哎呦喂iuv的博客
06-14 7366
写在前面 实现目标：点击图片，可以弹出一个Panel界面。 实现方法：使用组件Event Trigger给图片添加一个Click事件，并将Click需要实现的功能代码绑定到该图片。 实现步骤 1.在inspector面板中的“Add Component”中找到“Event”，添加Event Trigger； 2.在Event Trigger中点击，选择“PointerClick”；在出现的界面上点击“+”，添加一个list； 3.点击如下左图中的图标，选择将要添加点击事件的图片名，.
html 给图片添加点击事件吗,如何给图片加click事件 jquery代码
weixin_36185593的博客
06-05 2383
湖上湖给图片一个Id$("#图片ID").click(function(){alert("aa”);});或者$("#图片ID").bind("click",function(){alert("aa");});扩展资料：JQuery中的click方法详解click方法(jquery中的)作用是触发onclick事件，只要执行了元素的click()方法，就会触发onclick事件。click()方法...
图片点击事件
youqingyike的专栏
07-27 3689
图片点击事件 方法1： 界面：         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         Title="MainWindow" Height="350"
前端怎么对一张图片特定某些点进行点击事件（image-map）
han_xiao_xiao的博客
09-02 3126
解决方案：把图片要点击的点生成map。
viewpager图片点击事件
Grantyoga
01-19 1873
在adapter重写instantiateItem方法@Override public Object instantiateItem(View container, int position) { View view = imageViews.get(position); view.setOnClickListener(new OnClickListener() {
html图片设置点击事件
qq_31493411的博客
08-04 4395
<a href="http://www.baidu.com"> <img src="../images/start.jpg" style="width: 20%; z-index: 4;" class="img" /></a> 加上一个<a></a>标签即可
如何实现点击图片上的某个特定位置
最新发布
黎小小的博客
01-30 898
【代码】如何实现点击图片上的某个特定位置。
[微信小程序]在图片上的特定区域点击实现功能
wahzx的博客
09-26 2473
点击地图上的特定区域进行跳转或执行其他操作
unity让图片部分区域透明度变高
09-18
在Unity中，要让图片的某个区域透明度变高，可以通过修改图片的Alpha通道来实现。 首先，确保你的图片格式支持Alpha通道，比如PNG格式，这样才能给图片的不同区域设置透明度。 接下来，在Unity中打开你的图片资源，选择该图片，在Inspector面板中，可以看到Texture Type选项。确保该选项的值为Advanced。 然后，在Inspector面板中，展开Advanced选项，可以看到Alpha Source选项。将其设置为"From Gray Scale"，这样图片的透明度将会根据Gray Scale颜色来决定。 接下来，在Unity的编辑器中，选中你的图片，会在Scene视图中出现一个GUI Texture或Raw Image组件，你可以将其作为UI对象添加到Canvas上，或者将其作为游戏世界中的物体添加到场景中。 然后，为该GUI Texture或Raw Image组件创建一个新的材质。在Unity的Project窗口中右键点击，选择Create->Material选项。将新材质的Shader设置为UI/Unlit/Transparent或Sprites/Default，这样材质才能支持透明度。 接下来，将这个材质应用到GUI Texture或Raw Image组件上。选中GUI Texture或Raw Image组件，在Inspector面板中的Material字段中，将之前创建的材质拖放到该字段中。 最后，通过在材质的颜色属性或主纹理属性中调整Alpha通道的值，来改变图片的某个区域的透明度。你可以使用颜色选择器或直接在材质属性中输入具体的Alpha值来调整透明度。 这样，你就可以在Unity中实现图片部分区域透明度变高的效果了。记得保存你的场景和材质，然后运行游戏或查看场景，就能看到图片的部分区域的透明度变高了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值