Question

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

我的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');
    });
});

Here is my jsfiddle

Answer 1

我很害怕，无法在background上设置<area>，因为它不是图形元素。如果有可能有人会使用它来创建简单的<canvas>：）

Here是一个论坛，人们谈论类似的

Answer 2

遗憾的是，这不适合使用图像地图，因为它们实际上并不是可以设置样式的元素。

但是，如果您将其切换为在映射的圈子所在的位置使用一些绝对定位的div，并结合CSS border-radius属性，则可以创建您正在寻找的效果：{{3 }}

这对你的问题来说应该是一个非常直接的解决方案。

Answer 3

我会使用<a>代替地图，这可以帮助您实现相同的目标。只需将它们设置为＆＃39; position：absolute＆＃39;用＆＃39; top＆＃39;并且＆＃39;离开＆＃39;具有坐标值，＆＃39;宽度＆＃39;，＆＃39; height＆＃39;随着尺寸的价值（因为它只有13个像素，我不喜欢矩形和圆形将是不同的）。使用类名为它们分配，以便您可以使用jQuery选择它们。并且不要忘记设置容器＆＃39; as＆＃39; position：relative＆＃39;。

Answer 4

尝试这个插件可能会有所帮助。但是你可以看看它。 http://archive.plugins.jquery.com/project/maphilight 这是演示链接 http://davidlynch.org/projects/maphilight/docs/demo_world.html

使用jquery我想根据坐标将图像放在另一个上

4 个答案: