使用Javascript获取图片坐标以及宽度高度的方法

最新推荐文章于 2023-10-20 14:37:20 发布

转载最新推荐文章于 2023-10-20 14:37:20 发布 · 106 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xuhongfei/archive/2013/06/01/3112670.html

文章标签：

#javascript #ViewUI

本文介绍如何通过JavaScript获取图片宽度与长度，并利用这些信息实现地图上的标注功能，包括鼠标点击事件和移动事件时获取鼠标位置。演示了一个简单的地图应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先说下获取图片宽度与长度的问题：

<script type="text/javascript">
         function lpimgClick(img,event)
         {
             var x = img.width;
            alert(x);
         }
     </script>

  
     <img id="lpnk" alt="图"src="images/20111122142401700-w.jpg" height="395" width="695"  onclick="lpimgClick(this,event)"/>

使用这种方法可以获得图片的宽度和长度。

获取图片点击事件或者move事件时候鼠标指针的位置：

 <script type="text/javascript">
         function lpimgClick(img,event)
         {
             var x = event.clientX / img.width;//按比例获取 
             $("#txtX").val(x);
             var y = event.clientY;
             $("#txtY").val(y);    
         }
     </script>

网页中的img标签事件跟上面一个一样

  
     <img id="lpnk" alt="图"src="images/20111122142401700-w.jpg" height="395" width="695"  onclick="lpimgClick(this,event)"/>

使用这两个方法可以做个地图标注的功能，当然，这只是最简单的演示。

转载于:https://www.cnblogs.com/xuhongfei/archive/2013/06/01/3112670.html