使用相同图像映射的多个图像-如何在点击上返回正确的图像参考

Question

我在一个页面上有多个图像，都使用相同的图像映射。我需要知道什么图像的用户点击。问题是$(this)返回对<area>的引用而不是对<img>的引用。下面是代码:

<img src="image.png" usemap="#imageMap"/>
<img src="image.png" usemap="#imageMap"/>
<img src="image.png" usemap="#imageMap"/>
<map name="imageMap">
  <area shape="rect" coords="0,0,27,12" href="javascript:;" onclick="up($(this));">
  <area shape="rect" coords="0,13,27,25" href="javascript:;" onclick="down($(this));">
</map>

我怎么知道在up和down函数中哪个是点击的图像?

Answer 1

只有一张地图

如果您期望为每个img创建多个area实例，那么您将会失望。无论您将map应用于多少img，它仍然只是相同的一个 map，内部相同的2个area。所以在onclick里面使用$(this)不会有太大的帮助。

你真正需要的

单击area时，为当前img的index;这很容易得到。

jQuery

var n;//index of current image 
$(document).ready(function() {//on ready
    $('img').each(function(i) {//get index
        $(this).hover(function() {//and on hover
            n = i;//set index
        });
    });
});

这意味着你的onclick现在可以只是up()或down()，因为使用$(this)不返回当前图像。

创建一个小提琴，突出显示当前图像，以便您可以很好地了解它是如何工作的