【获取图片坐标问题，百分感谢】

DotCpp 2011-03-07 03:33:45

问题描述：
我想实现的功能是：在WEB页面上有一张静态图片（假设图片内容为地图），用户可以点击图片取得坐标，然后可以将一些备注信息同坐标一起存到数据库里面，下次访问时，可以在该坐标位置显示那条备注信息。

其实简单点就是现在主流的地图功能。

我的问题如下：
如何用JS获得当前鼠标双击位置相对图片左上角的坐标？
当用户访问时，如何实现类似GOOGLE地图的tooltip样式显示？

有好的方法和思路即可

问题解决，立即结帖、100%的结分率人品保证

分不足以为谢，对所有回复者表示感谢

...全文

110 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

一克代码 2011-03-07

打赏
举报

[Quote=引用 4 楼 dotcpp 的回复:]
引用 1 楼 adsdassadfasdfasdf 的回复:

你的图片是什么格式,每个象素是怎么表示的?

比如RGB图,你就可以定义一个结构体数组
比如
struct MYRGB{
int r;
int g;
int b;
}

然后定义一个足够在的数组,MYRGB buf[768*768];
这时用buf[x*768+y]就得到了(x,y)处的像素点

感……
[/Quote]

或去屏幕坐标不可以！

就像你说的分辨率不一样！

DotCpp 2011-03-07

打赏
举报

[Quote=引用 1 楼 adsdassadfasdfasdf 的回复:]

你的图片是什么格式,每个象素是怎么表示的?

比如RGB图,你就可以定义一个结构体数组
比如
struct MYRGB{
int r;
int g;
int b;
}

然后定义一个足够在的数组,MYRGB buf[768*768];
这时用buf[x*768+y]就得到了(x,y)处的像素点
[/Quote]

感谢你的回答，不过我打算把图片固定大小，不让用户缩放
考虑像素应该是为了考虑不同的显示器分辨率吧？我一开始觉得直接用获取屏幕坐标，这样不可以吗？请赐教

一克代码 2011-03-07

打赏
举报



javascript获取图片坐标的方法2009年10月04日 星期日 21:56//获取坐标

function isDefined(object) {

   return (typeof (object) != "undefined");

}

function getLeftOfElement(e) {

   var result = 0;

   if (isDefined(e.style) && isDefined(e.style.left)

     && typeof (e.style.left) == "string") {

    if (isDefined(e.offsetLeft))

     result = e.offsetLeft;

    else

     result = parseInt(e.style.left);

    if (isNaN(result))

     result = 0;

   } else if (isDefined(e.style) && isDefined(e.style.pixelLeft)) {

    result = e.style.pixelLeft;

   } else if (isDefined(e.left)) {

    result = e.left;

   }

   return result;

}



function getTopOfElement(e) {

   var result = 0;

   if (isDefined(e.style) && isDefined(e.style.top)

     && typeof (e.style.top) == "string") {

    if (isDefined(e.offsetTop))

     result = e.offsetTop;

    else

     result = parseInt(e.style.top);

    if (isNaN(result))

     result = 0;

   } else if (isDefined(e.style) && isDefined(e.style.pixelTop)) {

    result = e.style.pixelTop;

   } else if (isDefined(e.top)) {

    result = e.top;

   }

   return result;

}



注意：在使用时需要在页面中引入下面DTD,否则不能正确的获取坐标值。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">



<html>