동일한 이미지에서 이미지 맵과 링크 사용

Question

동적으로 생성 된 이미지 맵이있는 이미지가 있습니다. 사용자가지도를 클릭하여 <area href= 속성으로 가져갈 수 있기를 바랍니다.

그러나지도의 배경이 아닌 배경을 클릭하면 배경 URL로 이동하게됩니다.

그래서 내 코드는 다음과 같이 (fiddle)를 찾습니다 :

내가 예상대로 작동 크롬/FX에서

<a href="fromAnchor.html" target="_blank"> 
    <img src="image.png" usemap="#test" /> 
</a> 

<map name="test" id="test"> 
    <area href="fromMap.html"> 
</map> 

- 나는 area 태그의 형태로 클릭하면 내가 다른 곳을 클릭하면 내가 fromMap.html로 이동 취득 fromAnchor.html으로 연결됩니다.

그러나 IE (IE10까지 테스트)에서 img을 클릭했지만 area 외부는 아무 것도 실행하지 않습니다. 왼쪽 하단에 URL 힌트가 표시되지만 a 태그를 따르지는 않습니다.

이 방법이 있습니까?

Answer 1

나는 해결책을 생각해 냈지만, 좀 끔찍하다. (그래서 더 좋은 대답을 보게되어 매우 행복 할 것이다.)

내 해결 방법은 동적으로 다시 빠져 나가는 지역의 가을 외부 클릭을 전체 이미지를 채우는 대체 <area>을 추가하도록하는 것입니다 :

var msie = /MSIE/.test(navigator.userAgent); 
if (msie) 
{ 
    // Don't do this hack twice 
    $('map[data-iehack!="1"]').each(function() 
    { 
     // First find the image this map applies to 
     var $this = $(this); 
     var name = $this.attr('name'); 
     var $img = $('img[usemap="#' + name + '"]'); 

     // Then find if the image is in an <a> tag 
     var $link = $img.parents('a'); 
     if ($link.length > 0) 
     { 
      // If there is an <a> add an extra <area> that fills the image 
      var wrapLink = $link[0].href; 
      var width = $img.width(); 
      var height = $img.height(); 
      var $fallbackArea = $('<area shape="rect" coords="0,0,' + width + ',' + height + '" />'); 
      $fallbackArea.attr('href', wrapLink); 
      $this.append($fallbackArea); 
     } 

     // Flag this map so we don't add it again 
     $this.attr('data-iehack', '1'); 
    }); 
} 

이 예제는 jQuery를에 있지만 교장은 다른 프레임 워크에서 작동합니다 .

이보다 더 좋은 방법이 있어야합니다.이 해킹은 IE의 실패를 감지하는 방법을 찾을 수 없기 때문에 브라우저를 확인해야합니다.