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

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) 不会返回当前图像。

Made a fiddle 突出显示当前图像，以便您了解其工作原理。