在Internet Explorer中使用區域地圖燈箱

我正嘗試使用帶有區域地圖的燈箱。我已經很好地使用Firefox，但在Internet Explorer中，它只是打開一個新窗口。我嘗試過使用Slimbox，但它似乎根本不支持區域地圖。在Internet Explorer中使用區域地圖燈箱

建議？下面是HTML代碼：

<div align="center"><img src="images/background-temporary.jpg" width="667" height="475" border="0" usemap="#Map" /> 
<map name="Map" id="Map"> 
    <area href="images/background-temporary.jpg" shape="poly" coords="236,396,267,396,269,428,237,429,236,396" /> 

</map>

來源

2009-08-13 Kristopher Myers

哦，哇。我什麼時候失去了「rel =」lightbox「」屬性。我失敗了。

來源

2009-08-13 16:07:32

嘗試編輯您的舊帖子，而不是回答您的舊問題 – 2009-08-13 16:32:26

這應該適用於任何瀏覽器，而不僅僅是IE瀏覽器。在區域地圖中，添加一個id標記。

<area shape="rect" id="yourid" coords="5,65,132,116" alt="Your Alt Description" />

在地圖的外部，將這種代碼添加到html中，並在空標記中添加一個id。

<a href="an_image.jpg" rel="lightbox[a]" Title="My title"><span id="empty_span"></span></a>

使用JavaScript，做這樣的事情

<script> 
    $('area').click(function(){ 
     $("#empty_span").click(); 
    }); 
    </script>

爲多個區域，你可以創建多個點擊功能或數在兩個區域標籤和點擊功能的IDS - 如下：

<map etc.... 
    <area shape="rect" id="id1" coords="5,65,132,116" alt="1st Description" /> 
    <area shape="rect" id="id2" coords="55,65,132,116" alt="2nd Description" /> 
    <area shape="rect" id="id3" coords="105,65,132,116" alt="3rd Description" /> 
    </map> 

    <a href="1st_image.jpg" rel="lightbox[a]" Title="1st title"><span id="span1"></span></a> 
    <a href="2nd_image.jpg" rel="lightbox[a]" Title="2nd title"><span id="span2"></span></a> 
    <a href="3rd_image.jpg" rel="lightbox[a]" Title="3rd title"><span id="span3"></span></a> 

    <script> 
    $('area').click(function(){ 
      $("#span"+$(this).attr("id").substr(2)).click(); 
    }); 
    </script>

來源

2012-12-16 17:35:56 Mffffff

在Internet Explorer中使用區域地圖燈箱

回答

相關問題