javascript - 在 Internet Explorer 中使用区域地图的灯箱

Question

我正在尝试将 Lightbox 与区域地图一起使用。我已经让它在 Firefox 中正常工作，但在 Internet Explorer 中，它只是打开一个新窗口。我尝试使用 Slimbox，但它似乎根本不支持区域地图。

建议？这是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>

Answer 1

哦，哇。我什么时候失去了“rel="lightbox"”属性。我失败了。

Answer 2

这应该适用于任何浏览器，而不仅仅是 IE。在区域地图中，添加一个 id 标签。

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

在地图之外，将这种代码添加到 html 中，其中包含一个在 a 标签内有一个 id 的空 span。

    <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>

对于多个区域，您可以创建多个点击函数或在区域标签和点击函数中为 id 编号 - 如下所示：

    <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>