アプリ版：「スタンプのみでお礼する」機能のリリースについて

マウスオーバー+クリカブルマップ+Lightbox

解決済

  • 質問者：Rafi
  • 質問日時：
  • 回答数：1件

ホームページを作成しているのですが、一枚の絵に複数のリンクを作り、それにマウスオーバーさせて、クリックするとLightboxが稼動するということはできるのでしょうか。

現在、Lightboxの応用のFancyboxを使用して、クリッカブルマップとLightboxは出来たのですが、これだとMacとFirefoxでは動きませんでした。

そもそも、この3つの組み合わせって可能でしょうか？
勉強して試すにしても、そもそも無理なのかどうかがわかっていないので、御指南頂ければと思います。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： yyr446
  • 回答日時：

クリッカブルマップのどうやって実装してるか、書かれてないのでなんですが、


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うまくいきました。

この回答への補足

マウスオーバーがなかなかうまく行きませんでしたが、CSSで背景ごと変える方法でなんとかできました。
ありがとうございました。

補足日時：2011/03/21 09:42
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます！
ソースで書いて頂いてありがとうございます。
参考になります。
多分、パターンBがやっていたのと近いので、ここから頂いたソースを参考に勉強しています。

おっしゃる通り、クリカブルマップはhtmlのmapを使用しています。
まだ試せていないのですが、取り急ぎお礼させて頂きます。
実際に試して成功したら、補足にてご報告致します。

どうもありがとうございました。

通報する
お礼日時：2011/03/08 17:02

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報