确定使用JavaScript(或jQuery)单击Map (imageMap)中的哪个区域

I'm writing a mock up (using HTML, JS/jQuery) and CSS for a client which involves having a single image (of an interface) with an Map applied to it. For reasons I won't explain when a certain area is clicked an action is performed which includes an animation, then changing the image src (so it looks like it is moving between interfaces) and then I apply a different imagemap to the image (perhaps I should say <img> tag)

我正在为客户端编写一个模拟(使用HTML、JS/jQuery)和CSS，其中包含一个应用于它的地图的单个图像(接口)。出于一些原因，我无法解释当某个区域被单击时，会执行一个动作，其中包括一个动画，然后改变图像src(所以它看起来像是在接口之间移动)，然后我将一个不同的imagemap应用到图像上(也许我应该说确定使用JavaScript(或jQuery)单击Map (imageMap)中的哪个区域标记)

The client asked for this, I know it seems like madness but I don't have any mockup tools to perform the animations, etc, etc...

客户要求这样做，我知道这看起来很疯狂，但是我没有任何模型工具来执行动画等等。

I've noticed a pattern and I could refactor my code so it is easier to extend and maintain. However I was wondering, say I have the following HTML:

我注意到了一个模式，我可以重构代码，以便更容易扩展和维护。但是我想知道，假设我有以下HTML:

<img src="claas_ipad3.jpg" USEMAP="#claas_ipad3" width="1130" height="871" alt="" border="0" id="mainPage">
    <map name="claas_ipad3">
      <area shape="rect" coords="181,249,255,341" href=""  alt="" id="Contacts">
      <area shape="rect" coords="345,251,454,341" href=""  alt="" id="Appointments">
      <area shape="rect" coords="533,256,576,311" href=""  alt="" id="Maps">
      <area shape="rect" coords="686,255,785,344" href=""  alt="" id="Tasks">
      <area shape="rect" coords="835,246,973,348" href=""  alt="" id="Products">
      <area shape="rect" coords="176,412,278,513" href=""  alt="" id="Reports">
      <area shape="rect" coords="330,411,457,513" href=""  alt="" id="PriceTable">
      <area shape="rect" coords="502,399,637,518" href=""  alt="" id="SalesCycle">
      <area shape="rect" coords="677,398,808,519" href=""  alt="" id="MetaData">
      <area shape="rect" coords="844,408,970,510" href=""  alt="" id="Settings">
      <area shape="rect" coords="173,545,283,662" href=""  alt="" id="Vids">
      <area shape="rect" coords="328,558,461,652" href=""  alt="" id="Web">
      <area shape="rect" coords="491,559,626,666" href=""  alt="" id="Files">
    </map>

Is it possible for me to determine using JavaScript or jQuery if an area was clicked? Then I could identify the ID and perform the correct actions. What I currently have is a lot of different conditions like so...

如果一个区域被单击，我是否可以使用JavaScript或jQuery来确定?然后我可以识别ID并执行正确的操作。我现在有很多不同的条件，比如……

 $("#Contacts").click(function(event){
            event.preventDefault();

            // okay lets show the contacts interface
            $("#mainPage").fadeOut(300, function(){
                $(this).attr('src','claas_ipad3_1.jpg').bind('onreadystatechange load', function(){
                    if (this.complete){
                        $(this).fadeIn(300);
                        $(this).attr('USEMAP','#claas_ipad_1');
                    }
                    });
                });
            });

However if I know which area was clicked (by determining the id) I can apply array values into a generic function rather than binding to the map areas specifically.

但是，如果我知道单击了哪个区域(通过确定id)，我可以将数组值应用到泛型函数中，而不是专门绑定到映射区域。

I was thinking I could determine the id of what was clicked something like this:

我想我可以确定被点击的内容的id如下:

$(this).live('click', function () {
    alert($(this).attr('id')); 
});

however this will affect my whole page, which isn't a problem but I know it won't work.

但是这会影响到我的整个页面，这不是问题，但我知道它不会起作用。

Sorry if I haven't explained myself well or my wording is poor. I can extend or reword if desired.

对不起，如果我没有很好地解释我自己或者我的措辞不好。如果需要的话，我可以扩展或重述。

Thanks

谢谢

UPDATE

更新

I have solved this, if I apply an ID to the Map using the following will return the ID

我已经解决了这个问题，如果我对映射应用ID，使用下面的代码将返回ID

 $("#Map1 area").click( function () {
        alert($(this).attr('id')); // this
    });

1 个解决方案

#1

There are different approaches. I guess the easiest would be this one:

有不同的方法。我想最简单的就是这个:

$("map[name=claas_ipad3] area").live('click', function () {
    alert($(this).attr('id')); 
});

Note that as of jQuery 1.7, the .live() method is deprecated and you should use .on() to attach event handlers:

注意，对于jQuery 1.7， .live()方法已经过时，您应该使用.on()附加事件处理程序:

$("map[name=claas_ipad3] area").on('click', function () {
    alert($(this).attr('id')); 
});

#1