确定使用JavaScript（或jQuery）在Map（imageMap）中点击了哪个区域 [英] Determine which Area in a Map (imageMap) was clicked using JavaScript (or jQuery)
问题描述
我正在为一个客户端编写一个模拟（使用HTML，JS / jQuery）和CSS，其中涉及一个应用了Map的单个图像（一个接口）。出于某些原因，我不会解释何时单击某个区域时会执行包含动画的操作，然后更改图像 src （所以它看起来像在接口之间移动），然后我应用一个不同的图像映射到图像（也许我应该说< img> 标记）
客户问到了这一点，我知道这似乎是疯狂的，但我没有任何样机工具来执行动画，等等，等等...
我已经注意到一种模式，我可以重构我的代码，所以它更容易扩展和维护。然而，我想知道，说我有以下的HTML：
< img src =claas_ipad3.jpgUSEMAP =＃ claas_ipad3width =1130height =871alt =border =0id =mainPage>
< map name =claas_ipad3>
< area shape =rectcoords =181,249,255,341href =alt =id =Contacts>
< area shape =rectcoords =345,251,454,341href =alt =id =Appointments>
< area shape =rectcoords =533,256,576,311href =alt =id =Maps>
< area shape =rectcoords =686,255,785,344href =alt =id =Tasks>
< area shape =rectcoords =835,246,973,348href =alt =id =Products>
< area shape =rectcoords =176,412,278,513href =alt =id =Reports>
< area shape =rectcoords =330,411,457,513href =alt =id =PriceTable>
< area shape =rectcoords =502,399,637,518href =alt =id =SalesCycle>
< area shape =rectcoords =677,398,808,519href =alt =id =MetaData>
< area shape =rectcoords =844,408,970,510href =alt =id =Settings>
< area shape =rectcoords =173,545,283,662href =alt =id =Vids>
< area shape =rectcoords =328,558,461,652href =alt =id =Web>
< area shape =rectcoords =491,559,626,666href =alt =id =Files>
< / map>
如果点击某个区域，是否可以确定使用JavaScript或jQuery？然后我可以识别ID并执行正确的操作。我现在有很多不同的条件，比如......
$（＃Contacts）。click（function （event）{
event.preventDefault（）;
//好的让我们显示联系人界面
$（＃mainPage）。fadeOut（300，function（）{ $（b $ b $（this）.attr（'src'，'claas_ipad3_1.jpg'）。bind（'onreadystatechange load'，function（）{
if（this.complete）{
$（这个）.fadeIn（300）;
$（this）.attr（'USEMAP'，'＃claas_ipad_1'）;
}
}）;
}）;
}）;
然而，如果我知道哪个区域被点击了（通过确定id），我可以将数组值应用到泛型函数，而不是绑定到地图区域。
我想我可以确定点击的id是这样的：
$（this）.live（'click'，function（）{
alert（$（this）.attr（'id'））;
}）;
但是这会影响我的整个页面，这不是问题，但我知道它不会工作。
对不起，如果我没有解释得很清楚，或者我的措辞很差。如果需要，我可以扩展或改写。
感谢
更新
我已经解决了这个问题，如果我将一个ID应用到Map中，使用以下命令将返回ID
$（ ＃Map1 area）。click（function（）{
alert（$（this）.attr（'id'））; // this
}）;
有不同的方法。
我想最简单的就是这个：
$（map [name = claas_ipad3] area）。 live（'click'，function（）{
alert（$（this）.attr（'id'））;
}）;
请注意，从jQuery 1.7开始，.live（）方法已被弃用，您应该使用.on （）附加事件处理程序：
$（map [name = claas_ipad3] area）。on（'click'，函数（）{
alert（$（this）.attr（'id'））;
}）;
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)
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:
<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...
$("#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.
I was thinking I could determine the id of what was clicked something like this:
$(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
$("#Map1 area").click( function () {
alert($(this).attr('id')); // this
});
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:
$("map[name=claas_ipad3] area").on('click', function () {
alert($(this).attr('id'));
});
这篇关于确定使用JavaScript（或jQuery）在Map（imageMap）中点击了哪个区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
