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 =”灯箱“”属性。我失败了。

Answer 2

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

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

在地图之外，将这种类型的代码添加到html中，其中包含一个空标记，其标记位于标记内。

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

使用Internet Explorer中的区域映射的灯箱

2 个答案: