使用SPAN或DIV覆蓋地圖區域時

Question

我一直在研究處理地圖區域的新地圖。在RollOver上，我展示了一個SPAN中的省份，這種方式效果很好，但顯然，當我將SPAN與其上的省展示出來時，觸發Off狀態的地圖區域會被觸發，導致它反彈並且這不是我想要的。

然後，我採取了從地圖區域切換到使用活動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(); 
    }); 
}); 

有什麼辦法爲目標的地圖區域OFF狀態，即使全省SPANS節目時，您將鼠標放在地圖上的區域？謝謝，看下面的小提琴。

編輯 我能想到的這樣做的唯一另一種方式是一個地圖區域添加到各個省映射太多，但我想避免這種情況，因爲它是一個很多額外的工作，這些地圖將增長到未來的其他國家。

Answer 1

太好了。隨着小提琴很容易看到在跨度上應用紅色邊框的問題:)

我使用了當前img與相同圖像的副本（但最好用單個透明像素替換並移除不透明css ）它使用圖像映射。此外，鼠標懸停不再是跨度，但在同一區域，這也將使JavaScript代碼更容易閱讀。而這兩個圖像位於彼此的頂部。

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> 

的Javascript：

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/

它調整到您的喜好。 :)

編輯： 我已經在mouseout上添加了額外的jQuery .stop（），它停止那個不斷的動畫。