在javascript中向图像添加标记？

有人知道如何在Javascript中向图像（而不是地图）添加标记吗

理想情况下，我希望处理程序的行为类似于向地图添加标记，即onclick使标记显示在单击的点上，并返回单击点的x/y像素坐标

这可能吗

干杯 理查德是的，这是可能的

虽然只使用javascript是完全可行的，但我会使用类似的库

方法是在标记中添加一个img元素，然后在图像中添加一个-handler作为“映射”，将标记映射到单击元素的位置

以下是一个未经测试的示例：

<img src="marker.png" id="marker" style="display: none; position: absolute;" />
<img src="map.png" id="map" />

<script type="text/javascript">
$('#map').click(function(e)
{
   $('#marker').css('left', e.pageX).css('top', e.pageY).show();
   // Position of the marker is now e.pageX, e.pageY 
   // ... which corresponds to where the click was.
});
</script>

$（“#映射”）。单击（函数（e）
{
$（'#marker'）.css（'left'，e.pageX）.css（'top'，e.pageY）.show（）；
//标记的位置现在是e.pageX，e.pageY
//…对应于单击的位置。
});

---

编辑： 当然，这在没有JQuery的情况下也是完全可能的。 下面是一个代码示例

<img src="marker.png" id="marker" style="display: none; position: absolute;" />
<img src="map.png" id="map" />

<script type="text/javascript">
document.getElementById('map').onclick = function(e)
{
   with(document.getElementById('marker'))
   {
        style.left = e.pageX;
        style.top = e.pageY;
        style.display = 'block';
   }
   // Here you forward the coordinates e.pageX, e.pageY 
   // ... to whatever function that needs it
};
</script>

document.getElementById（'map'）。onclick=function（e）
{
带有（document.getElementById（'marker'））
{
style.left=e.pageX；
style.top=e.pageY；
style.display='block'；
}
//这里是坐标e.pageX，e.pageY
//…任何需要它的功能
};

没那么快。。。pageX和pageY给出了相对于页面左上角的像素位置。有没有办法获得图像中的像素位置？如果没有，我想我可以计算出图像角点的像素位置并进行减法，但它看起来有点混乱。谢谢。有许多不同的非标准化属性指定坐标，但它们似乎非常特定于浏览器。为了避免这种情况，我会像你说的那样减去图像的位置。非常感谢你，Richard和Martin NycanderMouseEvent.offsetX和MouseeEvent.offsetY在所有主要浏览器中都得到了支持，从IE6开始。