クリッカブルマップのどうやって実装してるか、書かれてないのでなんですが、
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で背景ごと変える方法でなんとかできました。 ありがとうございました。