思路很简单,就是设置coords对应的坐标按比例缩放就可以了。注意,给出的代码只是页面初始显示时调整一次,再发生变化没有进行调整。
<img src="KnMap.png" alt="知识地图" id="KnMap" style="width:100%;height:auto;" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="146,172,271,248" href="open?id=1000000062">
<area shape="rect" coords="483,240,578,316" href="open?id=1000000064">
<area shape="rect" coords="614,546,709,618" href="open?id=1000000066">
<area shape="rect" coords="60,552,180,623" href="open?id=1000000081">
<area shape="rect" coords="593,740,757,827" href="open?id=1000000061">
<area shape="rect" coords="253,931,624,1091" href="open?id=1000000054">
</map>
<script src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function resetHostArea(){
var srcw="960",srch="1429";
var noww=$("#KnMap").prop("clientWidth")*1.0;
//var nowh=$("#KnMap").prop("clientHeight")*1.0;
var scale = noww/srcw;
var areas = $("area");
var coords;
areas.each(function(){
coords = this.coords;
coords = coords.split(",");
coords = Math.round(coords[0]*scale)+","+Math.round(coords[1]*scale)+","+Math.round(coords[2]*scale)+","+Math.round(coords[3]*scale);
this.coords=coords;
});
}
$(function(){
resetHostArea();
});
</script>
分享到:
相关推荐
3. **响应式设计(Responsive Web Design)**:响应式设计是一种开发方法,使网站能够根据用户使用的设备(如桌面、平板电脑或手机)自动调整布局、图片大小和功能。它通过媒体查询、弹性网格布局和灵活的图片来实现...
总的来说,图片热区点击技术结合边界反弹、缩放和移动功能,为用户提供了一种富于互动和灵活的方式来探索和交互图像内容。在网页设计、教育、地图应用等领域都有广泛的应用。理解并掌握这些概念和技术,对于提升用户...
【vue3 + ts】支持图片缩放预览和图片热区点击功能
C#作为.NET框架下的主要编程语言,提供了丰富的库和API来支持图像处理操作,包括热区识别。本篇文章将深入探讨如何在C#中实现图像热区识别的思路。 首先,我们要理解什么是图像热区。热区(Hotspot)是指图像上定义...
图像识别技术则是让计算机能够理解并解析图像中的内容,这在自动化、机器学习和人工智能领域有广泛应用。在这个项目中,我们将深入探讨C#语言如何实现Winform应用程序中的图像热区识别以及相关的图像识别技术。 ...
在IT领域,图像热区识别是一项重要的技术,它主要用于交互式界面或数据分析中,以便用户可以与特定图像区域进行互动。在本实例中,我们将深入探讨C#编程语言中的图像热区识别技术。热区(Hotspot)是图像上定义的...
`<map>`标签定义了一个图像映射,即关联一个图像和一组定义的热区。`<area>`标签则用于定义热区的具体形状、坐标和行为。以下是创建热区的基本步骤: 1. **定义图像映射**:首先,你需要在HTML中插入图像,并使用`...
在网页设计中,"为图片根据坐标自动创建热区并点击变颜色" 是一种交互式功能,它允许用户通过点击图像上的特定位置来定义热区,并可以改变这些区域的颜色或透明度。这种技术通常用于创建图像映射,即在一张图片上...
在C#编程环境中,开发一个Winform应用程序进行图像热区识别和图像识别是一项常见的任务,尤其是在交互式应用、游戏或数据分析等领域。这个压缩包提供的源码可能是为了帮助开发者理解和实现这样的功能。以下是对这些...
图片热区是HTML图像映射(元素)的一部分,用于定义图像上的交互区域。每个热区由`<area>`元素定义,可以通过形状(如矩形、圆形或多边形)和坐标来指定。例如: ```html ,0,100,100" href="link1.html"> ,150,...
1. **图像**:这是包含热区的视觉元素,可以是任何类型的图片。 2. **形状**:热区的形状定义了用户可点击的区域,可以是矩形、圆形或其他复杂形状。 3. **坐标**:每个热区都有其坐标系统,用于确定形状在图像中的...
在网页设计中,图片热区(Image Map)是一种常见的交互元素,它允许用户与图片的特定区域进行交互,比如点击跳转到不同的链接或者执行其他操作。本示例主要探讨如何使用CSS来自定义图片热区,使得这些交互区域不仅...
在C#编程语言中,我们可以利用强大的库,如AForge.NET或OpenCV来实现复杂的图像处理任务,包括热区识别。热区识别通常指的是在图像上识别出具有特定行为或兴趣点的区域,例如网页上的可点击区域。这里,我们关注的是...
在实际应用中,这样的图片热区js插件常用于在线地图、产品展示、交互式图像教程等多个场景。开发者可以通过调整CSS样式来自定义热区的外观,也可以利用JavaScript API来扩展其功能,例如添加自定义事件处理或与其他...
总结起来,通过jQuery设置图片热区并生成图片涉及的关键知识点包括:HTML图片映射(`<map>`和`<area>`标签),jQuery事件处理(`click()`, `mouseover()`, `mouseout()`等),以及可能的Canvas API或图像处理库的...
总结,热区技术是网页设计中实现图像交互的一种方式,通过HTML图像映射和JavaScript结合,我们可以让图片上的不同区域具备不同的功能。理解并熟练运用这一技术,能为网站增加丰富的互动元素,提升用户体验。在实际...
本篇文章将深入探讨如何使用jQuery来创建具有多种功能的图片热区,包括添加多个热区,拖动调整热区位置和大小,以及为每个热区添加链接。 首先,我们需要理解HTML中的`<map>`和`<area>`标签。`<map>`标签定义了一个...
在IT行业中,模拟图片热区是一项常见的交互设计技术,它允许用户通过点击或悬停在图像的特定区域来触发特定的交互或展示相关信息。在这个场景中,"模拟图片热区 平面图点击及效果"涉及到的技术主要包括PNG定位、图片...
在属性窗口中,可以设置PictureBox的SizeMode为"StretchImage",以便图像能根据控件大小自动调整。 为了设置热区,我们需要创建自定义控件或扩展PictureBox类。创建一个新的类,继承自PictureBox,并添加一些属性来...
由于项目需要,开发一个c#的图片多热区设置的程序, IDE 使用的VS2010 使用的技术有 c#,jquery数据库使用SQL,数据操作使用LinQ To SQL. ...支持图片缩放,热区自动根据图片缩放进行缩放. 第一次上传自主产品,请支持!