- ベストアンサー
マウスオーバー+クリカブルマップ+Lightbox
ホームページを作成しているのですが、一枚の絵に複数のリンクを作り、それにマウスオーバーさせて、クリックするとLightboxが稼動するということはできるのでしょうか。 現在、Lightboxの応用のFancyboxを使用して、クリッカブルマップとLightboxは出来たのですが、これだとMacとFirefoxでは動きませんでした。 そもそも、この3つの組み合わせって可能でしょうか？ 勉強して試すにしても、そもそも無理なのかどうかがわかっていないので、御指南頂ければと思います。
- Rafi
- お礼率98% (112/114)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
クリッカブルマップのどうやって実装してるか、書かれてないのでなんですが、 HTMLの<map>を使ってるとして、 3パターン試してみました。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>FancyBoxTest</title> <style type="text/css"></style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4");</script> <script type="text/javascript" src="/jslib/jquery.fancybox-1.3.1/fancybox/jquery.fancybox-1.3.1.js"></script> <link rel="stylesheet" href="/jslib/jquery.fancybox-1.3.1/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" /> <script type="text/javascript"> $(function(){ $(".fancy").fancybox(); }); </script> </head> <body> <p>パターンA <div> <object data="/oil/sHX0W20.png" type="image/png" width="176" height="140" usemap="#mymap"> <map id="mymap" name="mymap"> <div> <a class="fancy" href="/oil/HX7_0W20.png" shape="rect" coords="0,0,88,140">HX70W20</a> <a class="fancy" href="/oil/HX5_0W20.png" shape="rect" coords="88,0,176,140">HX50W20</a> </div> <area class="fancy" href="/oil/HX7_0W20.png" alt="HX70W20" shape="rect" coords="0,0,88,140"/> <area class="fancy" href="/oil/HX5_0W20.png" alt="HX50W20" shape="rect" coords="88,0,176,140"/> </map> </object> </div> </p> <p>パターンB <div> <img src="/oil/sHX0W20.png" width="176" height="140" usemap="#mymap2"> <map id="mymap2" name="mymap2"> <area class="fancy" href="/oil/HX7_0W20.png" alt="HX70W20" shape="rect" coords="0,0,88,140"/> <area class="fancy" href="/oil/HX5_0W20.png" alt="HX50W20" shape="rect" coords="88,0,176,140"/> </map> </div> </p> <p>パターンC <div> <img src="/oil/sHX0W20.png" width="176" height="140" usemap="#mymap3"> <map id="mymap3" name="mymap3"> <div> <a class="fancy" href="/oil/HX7_0W20.png" shape="rect" coords="0,0,88,140"></a> <a class="fancy" href="/oil/HX5_0W20.png" shape="rect" coords="88,0,176,140"></a> </div> </map> </div> </p> </body> </html> あらゆるバージョンのブラウザーで試してませんが、 パターンBならFirefox、IE8、IE7、Chrome でFancyboxうまくいきました。 逆にFirefoxなら全部のパターンでFancyboxうまくいきました。
お礼
回答ありがとうございます！ ソースで書いて頂いてありがとうございます。 参考になります。 多分、パターンBがやっていたのと近いので、ここから頂いたソースを参考に勉強しています。 おっしゃる通り、クリカブルマップはhtmlのmapを使用しています。 まだ試せていないのですが、取り急ぎお礼させて頂きます。 実際に試して成功したら、補足にてご報告致します。 どうもありがとうございました。
補足
マウスオーバーがなかなかうまく行きませんでしたが、CSSで背景ごと変える方法でなんとかできました。 ありがとうございました。