使用jquery，我想把一个图像在另一个基于坐标

using jquery i want place an image over another based on the coordinates

本文关键字：图像 另一个 坐标 于坐标 一个 jquery 使用      更新时间：2023-09-26

我正在尝试根据坐标将图像放置在另一个图像上。

我的html是:

<button id="add">add image</button>
<div id="container">
    <img src="http://www.rangde.org/newsletter/nov11/images/real_tree.png" width="400" usemap="#treemap" />
</div>
<map name="treemap">
    <area shape="circle" coords="345,483,13" alt="Venus" href="#" />
    <area shape="circle" coords="333,361,13" alt="Venus" href="#" />
    <area shape="circle" coords="302,284,13" alt="Venus" href="#" />
    <area shape="circle" coords="79,350,13"  alt="Venus" href="#" />
    <area shape="circle" coords="55,489,13"  alt="Venus" href="#" />
</map>
我的脚本是: 
$('document').ready(function(){
    $('#add').click(function() {
        $('area[alt=Venus]').css('background','http://www.rangde.org/newsletter/nov11/images/green-ball.png');
    });
});

这是我的jsfield

这不是一个合适的使用图像映射，不幸的是，因为它们实际上不是一个可以被样式化的元素。

然而，如果你切换到使用一些绝对定位的div在相同的位置作为你的映射圆圈，结合CSS border-radius属性，你可以创建你想要的效果:http://jsfiddle.net/N6Sbt/1/

这应该是一个非常直接的解决你的问题的方法。

恐怕不能在<area>上设置background，因为它不是图形元素。如果可能的话，有些人会更早地使用它来创建简单的<canvas>:)

这是一个论坛，人们在这里谈论类似的

我将使用<a>而不是map，这应该有助于您实现相同的事情。只需将它们设置为"position:absolute"，其中"top"answers"left"具有坐标值，"width"，"height"具有大小值(因为它只有13像素，我不认为矩形和圆形会有那么大的不同)。为它们指定一个类名，以便您可以使用jQuery选择它们。别忘了把container设置为position:relative

试试这个插件，可能会有帮助。还在开发中，但你可以看一下。http://archive.plugins.jquery.com/project/maphilight这里是演示链接http://davidlynch.org/projects/maphilight/docs/demo_world.html

相关文章：