使用同一张图片映射的多张图片-如何在点击时返回正确的图片参考? [英] Multiple images using the same image map - how to return correct image reference on click?

问题描述

我在页面上有多幅图像，所有图像都使用相同的图像映射.我需要知道用户单击了什么图像.麻烦的是$(this)返回对< area> 的引用，而不是对< img> 的引用.这是代码:

I have multiple images on a page, all using the same image map. I need to know on what image the user clicked. Trouble is that $(this) returns a reference to <area> instead of the <img>. Here's the code:

<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 函数?

How do I know in the up and down functions which is the clicked image?

推荐答案

只有一张地图

如果您希望它为每个 img 创建多个 area 实例，您将很失望.不管您将一个 map 应用于多少 img ，它仍然只是相同的 one map 和相同的2里面的 area .因此，在 onclick 内使用 $(this)不会有太大帮助.

If you expect this to make multiple instances of area for each img, you're going to be disappointed. No matter how many img you apply a map to, it's still just the same one map with the same 2 area inside. So using $(this) inside of the onclick won't be much help.

您真正需要的东西

是单击 area 时当前 img 的 index ；容易获得.

Is the index of the current img when an area is clicked; which is easy to get.

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

Which now means that your onclick can now be just up() or down() since using $(this) does not return the current image.

制作小提琴 突出显示当前图像，这样您就可以获得很好地了解它的工作原理.

Made a fiddle which highlights the current image so you can get a good idea of how it works.

这篇关于使用同一张图片映射的多张图片-如何在点击时返回正确的图片参考?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！