마우스 링크에서 이미지 링크가 비활성화되었습니다.

마우스를 올리면 몇 개의 섹션이있는지도를 만들기 위해 핫스팟을 사용하고 있습니다. 나는 joverery mouseenter와 mouseleave를 사용하여 마우스를 올리면 팝업창이 나타납니다.마우스 링크에서 이미지 링크가 비활성화되었습니다.

사용자는지도 섹션 위에 마우스를 올리거나지도 바닥 글의 버튼을 가리킬 수 있습니다.

지도의 이미지 위에 마우스를 올리면지도의 바닥 글에있는 링크를 가리키면 이미지가 잘 나타납니다.

이미지는 링크로 묶여 있으며 바닥 글의 버튼도 마찬가지입니다. 클릭시 이미지가 리디렉션되지 않습니다. 나는 링크가 이미지에 있고, 바닥 글의 버튼과 같은 핫스팟에 직접 있지 않기 때문이라고 생각합니다.

이미지를 클릭 할 수 있습니까? 유사한 문제를 검색 한 결과이 문제와 관련이별로 없습니다. 어떤 제안이라도 대단히 감사하겠습니다. 미리 감사드립니다.

Code Example: 
(using google.com just for testing)

// CSS

#city1 {position: absolute; top: 25px; left: 25px}

// 마크 업

<div id="wrapper"> 
    <a href="https://google.com/" target="_parent"><img id="city1" class="hide" src="images/city1.jpg" /></a> 

    <img src="images/map.png" usemap="#map"/> 

    <map name="map"> 

    <area id="city-one" shape="rect" coords="25,33,209,258" href="https://google.com/" target="_parent"> 

    <area id="keyCity1" shape="rect" coords="494,558,599,608" href="https://google.com/" target="_parent"> 

    </map> 
</div>

// 스크립트 함수 hoverImg에서

$(document).ready(function() { 
    $('.hide').hide(); 

    function hoverImg(hoverLinkDiv, hoverImgDiv){ 
     $(hoverLinkDiv).bind('mouseenter', function(){ 
      $(hoverImgDiv).fadeIn(250); 

     }); 

     $(hoverLinkDiv).bind('mouseleave', function() {  
      $(hoverImgDiv).hide(); 
      $(hoverImgDiv).fadeOut(250); 

     }); 

    } 

     hoverImg('#city-one', '#city1'); 
     hoverImg('#keyCity1', '#city1'); 

});

출처

2014-05-09 Lorena Brito