在同一圖像上使用圖像地圖和鏈接

我使用動態生成的圖像地圖生成圖像。我希望用戶能夠點擊地圖並通過<area href=屬性。在同一圖像上使用圖像地圖和鏈接

但是，當他們點擊背景（即不在任何地圖的區域中）時，我希望它們通過背景URL。

所以我的代碼看起來是這樣的（fiddle）：

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

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

在鍍鉻/ FX它，因爲我期待的作品 - 如果我在area標籤的形狀點擊我得到採取fromMap.html，如果我點擊其他地方我被導向到fromAnchor.html。

但是，在IE（測試到IE10）點擊img，但在area之外什麼都不做。它確實在左下角顯示URL提示，但不會遵循a標記。

有沒有辦法解決這個問題？

來源

2014-01-27 Keith

我想出了一個解決方案，但它有點糟糕（所以會很高興看到更好的答案）。

我的解決方法是動態地添加後備<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的失敗。

來源

2014-01-27 12:52:42 Keith

在同一圖像上使用圖像地圖和鏈接

回答

相關問題