确定使用JavaScript（或jQuery）单击地图（imageMap）中的哪个区域

我正在为一个客户端编写一个模型（使用HTML、JS/jQuery）和CSS，其中包括一个（界面的）图像和一个应用于它的映射。出于某些原因，我将不解释单击某个区域时执行的操作，其中包括动画，然后更改图像

src

（因此它看起来像是在界面之间移动），然后将不同的图像映射应用于图像（也许我应该说

标记）

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

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

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

我在想，我可以确定点击内容的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');
                    }
                    });
                });
            });

然而，这将影响我的整个页面，这不是一个问题，但我知道它不会工作

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

谢谢

更新

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

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

---

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

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

请注意，从jQuery 1.7开始，.live（）方法已被弃用，您应该使用.on（）来附加事件处理程序：

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

注意：

.live（）

已替换为

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

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