SPAN 또는 DIV로 덮여있을 때의 기본지도 영역에 액세스

Question

지도 영역에서 작동하는 새로운지도 작업을하고 있습니다. 롤 오버에서 나는 SPAN에 지방을 보여주고 있는데 이것은 잘 작동하지만 분명히 SPAN을 위에 보여 주면 Off 상태의 방아쇠 인 Map Area가 해고되어 튀어 오르게됩니다. 내가 원하는 바가 아니야.

지도 영역에서 전환하여 활성 SPAN을 사용하므로지도 영역을 롤오버하면 지방이 포함 된 SPAN이 표시되고 SPAN의 RollOut이 표시 영역을 숨길 수 있습니다. SPAN을 다시 시작합니다.

이제 문제는지도 영역 좌표와 달리 더 큰 정사각형 영역에서 SPAN이 작동한다는 것입니다. 즉, 크기가 작은지도 중 일부를 타겟팅하기 어렵다는 것을 의미합니다. 여기 제가 현재 가지고있는 것이 있습니다.

HTML

<img class="alignleft size-full wp-image-1727" alt="Map of South Africa" src="http://site/files/za-map-with-provinces.gif" usemap="#SouthAfrica" width="680" height="610" /> 
<map id="SouthAfrica" name="SouthAfrica"> 
    <area ID="Western-Cape" title="Western Cape Distributors" coords="59,421,62,422,66,407,79,408,84,393,92,400,101,408,101,420,106,438,108,455,120,465,124,475,123,493,136,481,151,470,149,489,157,498,169,505,181,494,201,479,219,475,230,465,233,452,240,443,249,453,266,459,281,453,295,448,304,455,315,455,312,466,295,477,279,481,280,492,282,497,269,502,264,513,256,526,274,527,289,530,297,535,286,543,289,549,296,552,288,555,282,563,263,558,248,557,231,564,224,572,205,573,192,577,173,579,156,587,147,597,132,591,120,582,108,572,98,564,89,562,85,568,87,553,87,541,80,529,76,517,68,512,64,505,65,498,74,498,76,497,81,494,81,489,80,478,80,468,80,462,80,452,77,442,73,438,69,435,66,432,63,427,59,422" shape="poly" href="/distributors/western-cape/" /> 
    <area ID="Eastern-Cape" title="Eastern Cape Distributors" coords="400,401,373,400,374,411,370,423,357,433,339,438,328,450,317,455,318,464,313,474,297,477,284,482,280,492,284,501,280,504,274,507,266,516,261,528,286,530,300,536,293,545,302,555,322,562,337,569,359,557,373,557,377,559,380,550,390,545,406,547,420,542,441,532,461,517,479,503,507,474,534,448,554,433,559,420,551,408,531,405,521,402,524,391,521,387,518,375,516,371,490,379,481,396,473,400,460,394,453,385,443,400,423,405,405,398" shape="poly" href="/distributors/eastern-cape/" /> 
    <area ID="KwaZulu-Natal" title="Kwa-Zulu Natal Distributors" coords="519,369,525,384,526,390,525,401,538,407,551,410,559,420,574,396,597,362,609,336,636,316,656,290,661,260,668,237,671,226,640,223,635,246,618,246,611,244,603,248,578,250,565,250,549,255,544,267,543,284,536,295,519,305,513,311,523,320,534,328,532,341,524,357,519,364" shape="poly" href="/distributors/kwazulu-natal/" /> 
    <area ID="Free-State" title="Freestate Distributors" coords="443,229,413,243,403,251,399,262,391,263,375,268,358,278,350,295,348,309,342,324,330,343,330,356,342,374,360,388,368,399,381,402,399,397,416,399,434,399,450,391,443,371,437,355,433,347,454,340,466,319,474,308,494,303,506,304,520,308,539,293,542,275,541,255,527,246,508,234,487,232,476,230,470,222,458,227" shape="poly" href="/distributors/freestate/" /> 
    <area ID="Mpumalanga" title="Mpumalanga Distributors" coords="631,182,633,166,636,144,635,125,632,110,630,95,619,99,601,102,604,115,599,125,588,121,580,136,569,138,560,156,549,161,519,160,517,148,508,140,494,147,504,152,500,164,509,169,515,176,508,186,498,191,507,199,507,206,495,218,488,226,496,232,519,240,533,249,543,256,566,250,597,250,606,243,594,228,587,218,588,204,596,188,606,173,621,176" shape="poly" href="/distributors/mpumalanga/" /> 
    <area ID="Limpopo" title="Limpopo Distributors" coords="410,125,411,123,420,111,429,108,432,97,438,80,448,68,464,62,473,52,483,44,490,31,509,31,511,25,524,18,548,15,560,17,567,24,587,22,603,21,611,26,614,42,617,59,620,73,627,88,628,95,607,98,593,99,598,106,602,115,596,122,584,122,574,135,562,149,543,158,527,159,524,149,521,138,510,137,504,142,496,151,487,152,484,144,476,140,462,141,451,148,442,140,435,127,428,133,417,134,411,131" shape="poly" href="/distributors/limpopo/" /> 
    <area ID="North-West" title="Northwest Distributors" coords="258,190,264,177,269,164,277,153,286,152,301,161,315,168,340,176,357,175,372,174,384,161,392,143,391,129,401,126,410,127,418,137,432,133,435,135,444,145,449,147,466,144,478,145,483,152,477,159,469,168,467,178,454,181,447,192,441,204,440,215,449,220,454,225,440,232,423,231,410,243,402,253,389,262,368,270,352,282,348,273,354,264,342,263,339,275,335,282,331,274,329,265,315,266,316,254,314,243,313,229,297,220,289,209,285,198,282,188,268,195,259,206,259,190" shape="poly" href="/distributors/north-west/" /> 
    <area ID="Gauteng" title="Gauteng Distributors" coords="473,222,482,226,487,229,492,219,496,215,506,212,509,204,502,201,499,194,499,190,509,186,516,180,511,171,506,171,501,164,501,157,498,153,488,156,484,159,473,172,471,179,463,184,457,186,450,194,449,206,445,213,450,217,459,226,475,222" shape="poly" href="/distributors/gauteng/" /> 
    <area ID="Northern-Cape" title="Northern Cape Distributors" coords="152,132,155,296,144,298,131,308,124,317,117,325,102,320,88,318,70,319,54,311,51,310,46,304,45,296,43,288,34,280,27,284,19,302,11,305,27,336,33,362,40,378,52,399,57,417,63,423,73,406,91,399,102,402,106,418,110,435,114,450,121,467,126,477,127,490,145,478,161,471,155,485,160,495,169,505,184,496,201,478,226,473,232,456,240,445,258,452,274,456,295,452,312,454,330,451,337,441,355,433,368,421,368,397,344,380,327,369,325,358,340,322,349,304,349,283,346,269,334,286,325,276,324,267,313,267,311,251,309,234,298,223,286,213,281,196,267,202,262,215,255,193,242,211,230,222,209,223,191,223,179,223,172,210,181,193,185,175,175,155,163,143,162,137" shape="poly" href="/distributors/northen-cape/" /> 
</map> 

<div ID="MapWrapper"> 
    <a href="/distributors/north-west/"><span class="map-North-West"></span></a> 
    <a href="/distributors/limpopo/"><span class="map-Limpopo"></span></a> 
    <a href="/distributors/mpumalanga/"><span class="map-Mpumalanga"></span></a> 
    <a href="/distributors/kwazulu-natal/"><span class="map-KwaZulu-Natal"></span></a> 
    <a href="/distributors/gauteng/"><span class="map-Gauteng"></span></a> 
    <a href="/distributors/freestate/"><span class="map-Free-State"></span></a> 
    <a href="/distributors/eastern-cape/"><span class="map-Eastern-Cape"></span></a> 
    <a href="/distributors/western-cape/"><span class="map-Western-Cape"></span></a> 
    <a href="/distributors/northen-cape/"><span class="map-Northern-Cape"></span></a> 
</div> 

jQuery를

if(jQuery('#SouthAfrica')) { 
    jQuery('#SouthAfrica area').each(function() { 
     var id = jQuery(this).attr('id'); 
     jQuery(this).mouseover(function() { 
      jQuery('.map-'+id).slideDown(); 
     }); 
    }); 
} 

jQuery('#MapWrapper a span').each(function() { 
    var id = jQuery(this).attr('class'); 

    jQuery(this).mouseout(function() { 
     var id = jQuery(this).attr('class'); 
     //alert ("id = " + id); 
     jQuery('.'+id).slideUp(); 
    }); 
}); 

는 지방 공연에 걸쳐에도 오프 상태에 대한지도상의 지역을 대상으로 할 수있는 방법이 있습니까 때지도 영역에 걸쳐 마우스를? 고마워, 아래 바이올린을 보아라.

편집 나는이 작업을 수행하는 생각할 수있는 유일한 방법은 각 지방에지도상의 지역을 추가하는 것입니다 는하지만 난 그게 추가 작업이 많이 있어요으로 그 피하려고하고 너무 매핑하고이지도가 성장할 것 미래에 다른 나라들에게.

Answer 1

좋아요. 피들과 함께 스팬에 빨간 테두리를 적용하면 문제를 쉽게 볼 수 있습니다 :)

동일한 이미지에서 현재 img의 복사본을 사용했습니다 (단, 하나의 투명 픽셀로 바꾸고 불투명도 CSS) 이미지 맵을 사용합니다. 또한 마우스 오버는 더 이상 범위에 있지 않지만 자바 스크립트 코드를 훨씬 쉽게 읽을 수있는 같은 영역에 있습니다. 그리고 그 두 이미지는 서로의 위에 위치합니다.

HTML :

<div> 
    <img class="alignleft size-full wp-image-1727" alt="" src="http://vane.co.za/files/south-african-png-maps/za-map-with-provinces.gif" width="680" height="610" style="position: absolute; top: 0; left: 0;" /> 
    <img class="alignleft size-full wp-image-1727" alt="" src="http://vane.co.za/files/south-african-png-maps/za-map-with-provinces.gif" usemap="#SouthAfrica" width="680" height="610" style="z-index: 1000; position: absolute; top: 0; left: 0; opacity: 0;" /> 
</div> 

자바 스크립트 :

내가 작업 예제와 함께 바이올린을 갈래했습니다

if(jQuery('#SouthAfrica')) { 
    jQuery('#SouthAfrica area').each(function() { 
     var id = jQuery(this).attr('id'); 
     jQuery(this).mouseover(function() { 
      jQuery('.map-'+id).slideDown(); 
     }).mouseout(function() { 
      jQuery('.map-'+id)stop().slideUp(); 
     }); 
    }); 
} 

.

http://jsfiddle.net/6tRU3/3/

은 당신의 likings로 조정합니다. :)

편집 : 상수 애니메이션을 중단하는 mouseout에 추가 jQuery .stop()을 추가했습니다.