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

灰太狼 2022-04-08 09:29 271阅读 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 条评论，271人围观）

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

相关阅读

相关图片缩放

- (UIImage )scaleToSize:(UIImage )img size:(CGSize)size{ // 创建一个bitmap的conte

系统管理员/ 2023年10月16日 20:23/ 0 赞/ 31 阅读

相关图片焦点缩放

放大和缩小某个对象可能希望焦点锁定在特定位置。例如看一张照片，假设照片的(0,0,0)在中心位置，我们来放大脸部。如果只是Scale放大，Postion并没有变化，导致图

左手的ㄟ右手/ 2023年10月08日 09:59/ 0 赞/ 78 阅读

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

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

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

相关缩放图片代码

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

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

相关 js图片缩放

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

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

相关 HTML 图片热区（img usemap）

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

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

相关 HTML 图片热区（img usemap）

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

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

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

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

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

相关 java 图片缩放

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

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

相关 Glide 图片缩放

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

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