Карта изображений: показывать разные изображения при наведении

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

поэтому я сохранил каждую из стран как отдельное изображение, а пустая карта (с горячими точками) — это прозрачный png. когда я наведу курсор на Францию, карта с выделенной Францией будет отображаться за основной картой, а когда я уберу курсор с этой части карты, она скроет изображение.

Но по какой-то причине, когда я навожу курсор на точку доступа, изображение с Францией начинает мерцать, пока я не перестану двигать мышью.

Основная карта с точками доступа: Основная карта с точками доступа:

Фоновая карта с выделенной страной: введите здесь описание изображения

Мой код:

<img id="Image-Maps-Com-image-maps" class="img-responsive map-empty" src="/assets/img/map-empty.png" border="0" usemap="#image-maps" style="z-index: 900;"/>
    <map name="image-maps" id="ImageMapsCom-image-maps">
        <area id="point-port" shape="poly" coords="100,513,149,541,86,652,53,650,56,593" />
        <area id="point-italy" shape="poly" coords="465,473,571,450,603,478,572,491,714,645,662,707,628,755,633,754,619,756,567,732"/>
        <area id="point-aust" shape="poly" coords="664,394,622,386,563,426,592,457,661,450"/>
        <area id="point-france" shape="poly" coords="248,347,401,312,483,399,458,434,442,450,458,476,454,502,467,524,440,546,392,543,365,552,320,545,289,534,271,515,298,433"/>
    </map>
    <img src="/assets/img/Map-France.png" class="img-responsive maps map-france" style="position: absolute; display: none;"/>

JS:

$('#point-france').hover(function() {
    $('.map-france').show();
    $('.map-france').css({'top' : $('.map-empty').position().top, 'left' : $('.map-empty').position().left, 'z-index': '1' });
},function() {
    $('.map-france').hide();
});

Может ли кто-нибудь помочь мне понять, почему это происходит?

Пример JSFiddle


jquery css maps imagemap jquery-hover
person Community    schedule 10.01.2017    source источник
comment
JsFiddle   -  person urbz    schedule 11.01.2017

Ответы (1)


arrow_upward
0
arrow_downward

EDIT 2: На это, похоже, ответили здесь уже использую mouseenter и mouseleave вместо hover

EDIT: Скорректирован CSS, чтобы изменить z-индекс point-france на 2 и .map-france на -1

Кажется, проблема в том, что когда он перемещает карту и показывает, он больше не обнаруживает наведение. Поэтому, когда вы перемещаете мышь, она обновляется и скрывает карту, а затем снова показывает карту. изменение Z-индекса так, чтобы map-france было ниже point-france

$(document).ready(function() {

  $('#point-france').hover(function() {
      $('.map-france').show();
      $('#point-france').css({'z-index':'2'});
      $('.map-france').css({'top' : $('.map-empty').position().top, 'left' : $('.map-empty').position().left, 'z-index': '-1' });
    },function() {
      $('.map-france').hide();
    });

});
body {

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="Image-Maps-Com-image-maps" class="img-responsive map-empty" src="https://www.maloufsleep.com/assets/img/map-empty.png" border="0" usemap="#image-maps" style="z-index: 900;"/>
		<map name="image-maps" id="ImageMapsCom-image-maps">
			<area id="point-port" shape="poly" coords="100,513,149,541,86,652,53,650,56,593" />
			<area id="point-italy" shape="poly" coords="465,473,571,450,603,478,572,491,714,645,662,707,628,755,633,754,619,756,567,732"/>
			<area id="point-aust" shape="poly" coords="664,394,622,386,563,426,592,457,661,450"/>
			<area id="point-france" shape="poly" coords="248,347,401,312,483,399,458,434,442,450,458,476,454,502,467,524,440,546,392,543,365,552,320,545,289,534,271,515,298,433"/>
		</map>
		<img src="https://www.maloufsleep.com/assets/img/Map-France.png" class="img-responsive maps map-france" style="position: absolute; display: none;"/>

СТАРЫЙ ОТВЕТ

Вероятно, это не лучший способ сделать это, но, похоже, он работает.

То, что это делает, имеет 2 проверки наведения. Один для #point-france и один для .map-france.

person Timothy LeondTV Wall    schedule 10.01.2017
comment
Спасибо, это устранило проблему мерцания, но карта не скрывается до тех пор, пока мышь не выйдет за пределы изображения (а не только точка доступа). Я думаю, что происходит следующее: карта Франции загружается поверх пустой карты, и я попытался исправить это с помощью настройки индекса z, но я думаю, это не сработало - person ; 11.01.2017
comment
Попробуйте установить z-index равным -1 для .map-france и z-index равным 2 для #point-france. Это также должно сделать так, что вам нужна только одна проверка наведения. - person Timothy LeondTV Wall; 11.01.2017
comment
почему-то это не сработало. установка z-индекса на -1 в основном скрывает изображение. Я даже установил z-index родительского div на -1, но карта все еще не отображается. - person ; 11.01.2017
comment
Просто из любопытства. Это работает на jsfiddle? У меня он отлично работает на скрипте js, пока z-индекс .map-france равен -1. Я пытался изменить цвет фона и изображение, но мне всегда кажется, что это работает. Я пробовал это в Chrome, Firefox и Edge. Работает на всех из них в jsfiddle. - person Timothy LeondTV Wall; 11.01.2017
comment
Я немного покопался, и похоже, что на ваш вопрос ответили здесь: stackoverflow.com/questions/18464370/ Вместо этого вы хотите использовать mouseenter и mouseleave - person Timothy LeondTV Wall; 11.01.2017
comment
В качестве альтернативы вам может понадобиться плагин, поскольку вы используете область, а не div для выделения. см. эту ссылку stackoverflow.com/ вопросов/745110/ Дайте мне знать, как это происходит. Мне интересно посмотреть, поможет ли это. - person Timothy LeondTV Wall; 11.01.2017