HTML图像热区随图片缩放自动调整

灰太狼 2022-04-08 09:29 249阅读 0赞

思路很简单，就是设置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>

发表评论取消回复

表情：

评论列表（有 0 条评论，249人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5-canvas 图片缩放图像以适合或填充

缩放以适应意味着整个图像将可见，但如果图像与画布的外观不同，则侧面或顶部和底部可能会有一些空白空间。该示例显示了缩放以适合的图像。侧面的蓝色是由于图像与画布的外观不同。

ゝ一纸荒年。/ 2023年10月02日 11:08/ 0 赞/ 12 阅读

相关三、图像缩放、翻转

1、图像缩放 resize(InputArray src, OutputArray dst, Size dsize, double fx=0,

旧城等待，/ 2023年06月13日 11:11/ 0 赞/ 15 阅读

相关缩放图片代码

- ( UIImage \)imageWithImageSimple:( UIImage \)image scaledToSize:( CGSize )newSize\{

￡神魔★判官ぃ/ 2022年08月22日 06:26/ 0 赞/ 275 阅读

相关 Android手势缩放图片以及图片黏贴在手指随手势移动

一个Android手势缩放图片的工具类；同时，此类还实现另外一个功能：当手指按在触屏上移动时候，图片“黏贴”在手指上随手指移动而整体移动。具体使用方法可以是这样：先new一

﹏ヽ暗。殇╰゛Y/ 2022年08月07日 02:36/ 0 赞/ 211 阅读

相关 js图片缩放

感谢：https://zhidao.baidu.com/question/499471536.html 记录下关键代码： <html> <head

谁践踏了优雅/ 2022年07月14日 06:51/ 0 赞/ 315 阅读

相关 HTML 图片热区（img usemap）

<img> element ‘s attribute: usemap MDN [https://developer.mozilla.org/en-US/docs/Web/

淩亂°似流年/ 2022年07月12日 05:26/ 0 赞/ 163 阅读

相关 HTML 图片热区（img usemap）

<img> element ‘s attribute: usemap MDN [https://developer.mozilla.org/en-US/docs/Web/

小咪咪/ 2022年07月12日 05:26/ 0 赞/ 214 阅读

相关 HTML图像热区随图片缩放自动调整

　　思路很简单，就是设置coords对应的坐标按比例缩放就可以了。注意，给出的代码只是页面初始显示时调整一次，再发生变化没有进行调整。 <img src=

灰太狼/ 2022年04月08日 09:29/ 0 赞/ 250 阅读

相关 java 图片缩放

/\\ \ @Title: ImageUtils \ @Description: 调整图片大小 \ @author TimB

ゝ一世哀愁。/ 2022年03月26日 08:20/ 0 赞/ 401 阅读

相关 Glide 图片缩放

CenterCrop CenterCrop()会缩放图像，完全填充到 ImageView 界限内并且裁剪额外的部分，图像可能不会完整显示。 Glide.with

灰太狼/ 2022年02月04日 09:59/ 0 赞/ 415 阅读