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

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

只有一张 map

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

你真正需要的

是点击区域时当前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它会突出显示当前图像，以便您可以很好地了解它的工作原理。