Доступ к базовой области карты, когда она покрыта SPAN или DIV

Я работаю над новой картой, которая работает с областями карты. При RollOver я показываю провинцию в SPAN, и это работает хорошо, но, очевидно, когда я показываю SPAN с провинцией над ней, область карты, которая затем является триггером для состояния Off, срабатывает, заставляя ее подпрыгивать и вниз, что не то, что я хочу.

Затем я прибегнул к переключению с области карты, чтобы использовать активный 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 отображается, когда вы наводите курсор мыши на области карты? Спасибо, см. скрипку ниже.

РЕДАКТИРОВАТЬ Единственный другой способ, который я могу придумать, это добавить область карты к картам отдельных провинций, но я пытаюсь избежать этого, так как это требует много дополнительной работы, и эти карты будут расти. в другие страны в будущем.

jquery area

26.02.2014

Мне не совсем понятно, чего вы пытаетесь добиться. Не могли бы вы добавить для этого jsfiddle, чтобы у нас был более наглядный пример для тестирования? Сам пробовал, но без картинок сложно представить. 26.02.2014
Спасибо KoalaBear. Вот скрипт на jsfiddle.net/sixfootjames/3u2hL. По сути, в этом примере вы увидите, что возможность использовать область карты для состояний «Наведение» и «Выход» мыши была бы идеальной, но этого не может произойти, поскольку при наведении курсора на область карты вызывается отображение SPAN, что приводит к потере фокуса мыши. базовая область карты. 27.02.2014

Ответы:

Отлично. Со скрипкой легко увидеть проблему с нанесением красной рамки на пролеты :)

Я использовал дубликат текущего изображения с тем же изображением (но лучше заменить одним прозрачным пикселем и удалить непрозрачность css), которое использует карту изображений. Кроме того, наведение курсора больше не на диапазон, а на ту же область, что также сделает код javascript намного легче для чтения. И эти 2 изображения расположены друг над другом.

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/

Настройте его по своему вкусу. :)

EDIT: я добавил дополнительный jQuery .stop() в mouseout, который останавливает эту постоянную анимацию.

27.02.2014

Ух ты! Я обижен, я не подумал об этом варианте! Спасибо Коала! Отличная работа. 27.02.2014

Большой! Коллега предложил :) Иногда самый простой ответ — самый лучший. 27.02.2014

Разве я не знаю ... но обнаружение этой простоты иногда может быть иголкой в стеке поговорки :) Спасибо, приятель. 27.02.2014

Новые материалы

Кластеризация: более глубокий взгляд

Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

Как написать эффективное резюме

Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

Частный метод Python: улучшение инкапсуляции и безопасности

Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

Как я автоматизирую тестирование с помощью Jest

Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)

Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

Понимание расстояния Вассерштейна: мощная метрика в машинном обучении

В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot

В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..

Machine Learning JavaScript Blockchain Artificial Intelligence Data Science Cryptocurrency Software Development Python Web Development Coding Deep Learning AI Bitcoin React Software Engineering Ethereum Web3 Business Crypto Nodejs Solidity Development Front End Development Data Finance Money Java Trading Smart Contracts Typescript Productivity Tech Startup Investing Neural Networks Developer Computer Science NLP