代码之家 › 专栏 › 技术社区 › SixfootJames

使用SPAN或DIV覆盖时访问底层地图区域

area jquery

SixfootJames · 技术社区 · 10 年前

我一直在研究一种适用于地图区域的新地图。在RollOver上,我用SPAN显示了该省,这很好,但很明显,当我显示该省的SPAN时,触发关闭状态的地图区域被触发,导致它上下跳动,这不是我想要的。

然后,我从地图区域切换到使用活动的SPAN,这样当您在地图区域上滚动时,它会显示其中包含省的SPAN;当您在SPAN外滚动时,这意味着再次隐藏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();
    });
});

即使您将鼠标悬停在地图区域上时显示省SPANS,是否有任何方法将地图区域定位为非州?谢谢,请看下面的小提琴。

编辑我唯一能想到的另一种方法是在各个省份的地图上添加一个地图区域,但我尽量避免这样做,因为这需要大量额外的工作,而且这些地图将来会扩展到其他国家。

1 回复 | 直到 10 年前

SixfootJames 10 年前

太棒了使用小提琴很容易看出在跨度上应用红色边框的问题:)

我使用了当前img的一个副本,其中包含相同的图像(但最好用一个透明像素替换并删除不透明度css),该图像使用了imagemap。此外,鼠标悬停不再位于span上,而是位于同一区域,这也将使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>

Java脚本:

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(),它可以停止持续的动画。