ライトボックスは、Internet Explorerのエリアマップを使用しています

Question

私はエリアマップでライトボックスを使用しようとしています。私は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" /> 

マップの外側では、タグにidを持つ空のスパンを使用して、この種のコードをHTMLに追加します。 JavaScriptを使用して

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

は、あなたが複数のクリック機能または番号エリアタグとクリック機能の両方でIDを作成することができ、複数の領域については、この

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

ような何かを - 次のように：

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