Javascript jquery、js在地图区域中悬停时显示img，但选中时也显示img
我现在被困住了。我想我就快到了，但我就是想不出来。我已经在谷歌上搜索了一天，我只是被卡住了 我有一个世界地图的图像，有多个可选择的图像。当您将鼠标悬停在大陆上时，它会显示可选择的图像。当你再次移动鼠标时，它会自动不再显示。这就行了 我现在尝试的是，如果我点击这个大陆，图像就会留在那里。如果我再次单击，它将被取消选择。此外，您应该只能选择1个大陆。因此，如果我决定点击欧洲，而亚洲被选中，他应该自动取消选择亚洲 我的问题是，如果其中一个在工作，另一个会坏掉。如果悬停有效，则单击时图像不会保持选中状态。如果你可以点击图片，悬停将不再有效，他会在每次点击时选择所有内容（所以不是一个大陆）。他不会取消选择先前单击的区域 jQuery/js（这在我的文档中。就绪） PHP/HTML，在表单中Javascript jquery、js在地图区域中悬停时显示img，但选中时也显示img,javascript,php,jquery,image,Javascript,Php,Jquery,Image,我现在被困住了。我想我就快到了，但我就是想不出来。我已经在谷歌上搜索了一天，我只是被卡住了 我有一个世界地图的图像，有多个可选择的图像。当您将鼠标悬停在大陆上时，它会显示可选择的图像。当你再次移动鼠标时，它会自动不再显示。这就行了 我现在尝试的是，如果我点击这个大陆，图像就会留在那里。如果我再次单击，它将被取消选择。此外，您应该只能选择1个大陆。因此，如果我决定点击欧洲，而亚洲被选中，他应该自动取消选择亚洲 我的问题是，如果其中一个在工作，另一个会坏掉。如果悬停有效，则单击时图像不会保持选中
<map name="world" id="world">
<div id="worldlayers">
<img src="../images/world/world.jpg" alt="<?php echo EUROPE; ?>" usemap="#world" class="dblock" border="0"/>
<img src="<?php echo BASEHREF; ?>images/world/south-america.png" usemap="#world" class="world-south-america" />
<img src="<?php echo BASEHREF; ?>images/world/north-america.png" usemap="#world" class="world-north-america" />
<img src="<?php echo BASEHREF; ?>images/world/asia.png" usemap="#world" class="world-asia" />
<img src="<?php echo BASEHREF; ?>images/world/europe.png" usemap="#world" class="world-europe" />
<img src="<?php echo BASEHREF; ?>images/world/australia.png" usemap="#world" class="world-australia" />
<img src="<?php echo BASEHREF; ?>images/world/africa.png" usemap="#world" class="world-africa" />
</div>
<area class="south-america" shape="poly" coords="289,333,291,343,283,350,283,357,283,361,290,373,294,383,304,389,305,401,305,413,302,425,298,437,295,447,293,458,292,469,294,481,303,489,315,493,322,489,337,477,331,473,316,468,319,463,316,454,322,448,326,443,337,437,343,428,355,412,355,405,363,400,367,401,371,395,376,390,374,378,384,370,385,361,374,354,357,351,352,346,345,335,331,331,321,324,309,321,299,323,291,327" alt="south-america">
<area class="north-america" shape="poly" coords="208,143,196,139,183,134,170,140,161,143,153,136,138,134,124,129,116,133,103,141,98,145,102,152,104,157,96,162,101,168,106,170,104,175,98,182,97,189,108,195,115,196,110,201,96,211,98,217,116,210,128,204,135,195,143,191,154,190,163,198,170,207,170,214,172,217,178,223,186,231,188,235,189,243,190,251,193,260,198,269,202,276,209,281,210,288,216,298,222,299,228,300,229,308,240,314,251,317,256,315,261,321,270,327,278,333,288,334,290,326,292,321,312,314,314,305,303,303,289,296,285,289,284,281,291,275,297,269,299,259,306,253,316,249,327,241,340,237,346,234,342,224,338,213,332,203,324,195,322,187,321,175,324,165,326,158,320,151,314,142,311,133,302,125,293,117,286,111,289,102,290,93,290,83,302,87,308,93,318,100,326,108,330,111,335,123,336,134,337,143,336,150,337,161,342,169,344,176,348,181,352,189,360,193,365,191,370,181,370,172,379,164,388,157,392,150,402,148,410,138,413,126,413,116,418,108,422,101,420,91,418,82,420,69,420,59,423,48,428,39,433,31,425,25,418,23,411,12,397,5,380,5,365,4,355,8,343,14,334,19,325,18,318,12,309,7,301,7,286,9,275,13,268,19,261,25,252,33,250,38,246,47,242,53,236,61,225,60,216,65,210,72,203,78,196,87,190,95,188,101,188,110,186,120,184,129,194,132,202,131,206,136" alt="north-america">
<area class="africa" shape="poly" coords="442,266,438,273,432,278,434,284,429,287,425,291,420,299,421,305,421,310,417,318,421,328,428,333,434,338,440,341,450,341,458,338,466,338,472,341,476,345,470,351,476,358,479,364,484,373,480,383,481,389,485,395,486,405,488,413,492,418,494,427,502,428,509,428,517,425,522,419,525,412,528,406,533,399,545,400,549,406,557,404,561,394,562,387,566,377,561,372,553,379,544,376,542,368,542,362,542,356,549,348,556,342,560,337,566,327,565,323,556,325,549,325,543,317,539,311,534,304,531,296,526,289,524,283,523,280,510,279,503,275,497,280,489,275,484,272,481,269,479,263,464,263,456,266,448,267" alt="africa">
<area class="europe" shape="poly" coords="428,167,425,161,422,157,414,157,405,157,401,163,402,167,408,173,415,177,423,181,438,196,440,202,438,207,432,210,433,217,436,225,442,222,444,227,442,232,448,237,452,241,441,243,434,248,435,255,435,259,438,264,444,266,454,264,456,259,460,256,466,251,470,249,472,259,478,259,482,263,488,267,495,261,499,263,503,268,512,272,516,269,511,263,509,257,514,254,518,249,520,244,523,241,528,243,534,240,536,245,542,247,548,250,554,253,562,255,558,248,558,241,562,237,558,233,554,228,557,226,562,223,566,219,571,221,576,224,580,223,582,219,579,211,577,206,577,201,582,191,581,185,582,176,582,169,587,163,594,153,593,143,588,139,584,133,578,130,576,125,576,121,578,112,583,105,588,101,594,97,599,95,606,91,603,87,598,39,590,34,583,31,572,32,564,36,554,40,526,46,511,47,500,44,490,49,479,54,476,57,476,65,479,71,482,77,483,83,489,90,496,110,497,119,500,129,501,136,490,139,484,146,482,149,484,153,481,163,478,167,470,173,465,178,464,185,464,192,467,197,470,200,472,204,472,209,467,214,459,219,455,212,452,204,451,198,454,189,456,185,449,180,432,171" alt="europe">
<area class="australia" shape="poly" coords="756,353,757,368,758,373,758,383,752,383,748,379,750,373,743,372,734,370,728,375,721,378,716,383,712,387,700,393,696,397,696,404,698,409,700,417,702,421,700,426,708,428,715,425,720,424,727,421,734,421,743,424,744,431,749,429,752,435,757,438,762,441,763,449,768,453,774,449,778,443,809,461,813,464,820,460,824,454,828,449,832,445,836,439,837,434,831,428,828,424,820,393,817,383,815,377,811,369,798,362,784,355,775,349,765,351" alt="australia">
<area class="asia" shape="poly" coords="756,369,754,353,746,349,738,348,734,343,730,335,726,325,721,317,718,310,716,301,725,295,731,293,735,288,740,280,744,276,753,273,758,269,759,263,761,256,761,253,767,250,771,245,780,241,787,233,789,228,798,219,803,209,807,201,809,194,818,190,830,184,841,180,840,170,845,164,852,169,856,169,860,165,861,157,852,153,843,144,848,133,844,127,836,128,832,133,827,139,818,137,810,140,800,137,798,133,790,129,784,132,777,123,782,102,775,97,766,93,756,91,744,92,745,103,749,109,752,116,752,125,743,125,736,123,732,115,724,111,719,110,714,116,708,113,703,109,699,99,698,89,691,85,689,79,686,72,683,63,676,57,670,48,664,41,662,34,654,35,650,39,650,43,649,51,650,57,656,64,661,67,666,71,668,75,670,83,670,92,662,89,654,93,648,97,640,101,632,105,631,112,625,113,612,114,605,117,602,122,600,133,601,137,603,149,594,143,594,152,592,158,586,167,583,171,582,175,582,182,582,185,582,191,580,197,578,203,581,211,581,220,580,225,571,224,566,219,558,224,556,228,561,237,568,238,570,243,567,247,570,255,570,262,560,261,557,254,550,251,544,251,537,253,533,251,526,252,520,253,515,253,510,258,511,263,515,268,520,267,527,267,530,267,532,270,531,276,530,279,523,279,528,286,534,289,536,293,538,297,540,301,545,311,548,317,548,323,557,318,569,313,576,308,581,302,582,301,587,295,594,294,600,299,607,301,610,303,612,307,613,316,618,322,619,331,626,337,632,337,633,331,630,326,629,319,632,313,638,309,645,306,654,306,658,313,652,323,655,333,658,343,665,350,672,357,680,363,696,367,704,369,719,371,732,369,740,367,746,363,748,367" alt="asia">
</map>
<?php echo CONTINENTQUOTE." ".$location."!"; ?><br>
<fieldset>
<label for="destination"><?php echo DESTINATION.": "; ?></label>
<select id="continent" name="continent">
<option value="africa"><?php echo AFRICA; ?></option>
<option value="europe"><?php echo EUROPE; ?></option>
<option value="asia"><?php echo ASIA; ?></option>
<option value="australia"><?php echo AUSTRALIA; ?></option>
<option value="north-america"><?php echo NORTHAMERICA; ?></option>
<option value="south-america" ><?php echo SOUTHAMERICA; ?></option>
</select>
</fieldset>
<fieldset>
<input type="checkbox" id="horse" name="horse" value="horsename">Horsename
</fieldset>
<fieldset>
<input type="submit" name="travel" value="<?php echo TRAVEL; ?>" class="yellow" />
</fieldset>
“usemap=“#world”class=“dblock”border=“0”/
images/world/south america.png“usemap=“#world”class=“world south america”/>
images/world/north america.png“usemap=“#world”class=“world north america”/
images/world/asia.png“usemap=“#world”class=“world asia”/
images/world/europe.png“usemap=“#world”class=“world europe”/
images/world/australia.png“usemap=“#world”class=“world australia”/>
images/world/africa.png“usemap=“#world”class=“世界非洲”/>
马名
我还没有测试过这个，但是它应该可以帮助你理解你的逻辑
var clickedEl = null;
$(document).on('mouseover','map#world area',function(e){
if ( !clickedEl ) {
var el = $(this);
var elclass = el.attr('class');
$('.world-'+elclass).show();
}
e.preventDefault();
}).on('mouseleave','map#world area',function(e){
if ( !clickedEl ) {
var el = $(this);
var elclass = el.attr('class');
$('.world-'+elclass).hide();
}
e.preventDefault();
}).on('click','map#world area',function(e){
var el = $(this);
if ( el == clickedEl ) {
// it's the same el. hide it
var elclass = el.attr('class');
$('.world-'+elclass).hide();
clickedEl = null; // nothing clicked anymore
} else {
// it's a different el
// hide the old one
var oldclass = clickedEl.attr('class');
$('.world-'+oldclass).hide();
// show the new one
var elclass = el.attr('class');
$('.world-'+elclass).show();
$('select#continent').val(elclass).attr('selected','selected');
clickedEl = el;
}
e.preventDefault();
});
将var clickedEl=null；更改为var clickedEl=false；和
var oldclass=clickedEl.attr（'class'）；到var oldclass=$（clickedEl.attr（'class'）；我马上看到两个问题。首先，您正在删除mousleave侦听器，$（elclass.）。关闭（“mouseleave”）
，所以你的mouseleve在那一点之后就不起作用了。其次，在点击另一个区域后，你没有任何代码可以隐藏显示的区域。你必须编写代码才能做到这一点。这就是我尝试过的东西的意思。我试着删除mouseleave，然后东西保持选中状态，没有它，悬停可以工作，但是点击没有。我写了代码来显示被点击的区域，不是吗？或者这也错了吗？所有的大陆都是隐藏的，除非我说它们需要显示。但即使如此，如果它被点击（没有鼠标移动事件），它仍然没有显示所选的图像。但我知道某个部件正在工作，因为目标更改为单击的目标。我离开该区域的那一刻，就会触发mouseleave事件。通过Koen提到的调整，这种方式工作了。我打开了var oldclass=clickedEl.attr（'class'））；
intovar oldclass=$（clickedEl.attr（'class'）；
现在唯一不起作用的是，在选择了1个大陆之后，悬停不再起作用。但是这看起来也很不错，所以我想我还是到此为止：）
var clickedEl = null;
$(document).on('mouseover','map#world area',function(e){
if ( !clickedEl ) {
var el = $(this);
var elclass = el.attr('class');
$('.world-'+elclass).show();
}
e.preventDefault();
}).on('mouseleave','map#world area',function(e){
if ( !clickedEl ) {
var el = $(this);
var elclass = el.attr('class');
$('.world-'+elclass).hide();
}
e.preventDefault();
}).on('click','map#world area',function(e){
var el = $(this);
if ( el == clickedEl ) {
// it's the same el. hide it
var elclass = el.attr('class');
$('.world-'+elclass).hide();
clickedEl = null; // nothing clicked anymore
} else {
// it's a different el
// hide the old one
var oldclass = clickedEl.attr('class');
$('.world-'+oldclass).hide();
// show the new one
var elclass = el.attr('class');
$('.world-'+elclass).show();
$('select#continent').val(elclass).attr('selected','selected');
clickedEl = el;
}
e.preventDefault();
});