fancyboxにイメージマップを付けたい

質問

早急に解決しなければいけない問題なのですが、どうしてもわからず途方にくれています。
どなたか助けていただけませんでしょうか。

fancyboxで表示したイメージ画像にイメージマップを付け、リンクを飛ばしたいと思っています。
https://gist.github.com/2972293
上記のサイトを参考にして一時は上手く行ったのですが、
いくつかの画像にそれぞれ個別のリンクを設定しようとしたところ、同じリンク先にしか飛ばない事に気付きました。

#Mapを増やせばいいのかなと思ったのですが（#Map2や#Map3など）
自分で書いても上手くいきませんでした。

どうすれば複数の画像に別々のリンク先を設定するようにできるでしょうか。
ご回答宜しくお願いします。

一応自分で書いたhtmlを載せておきます。

-----------------------------

<script type="text/javascript">
$(function() {
$(".fancybox").fancybox({
padding:0,
margin:0,
onComplete: function() {
$('#fancybox-img').attr('usemap', '#Map');
}
});
});
</script>

<a href="images/test.jpg" class="fancybox"><img src="images/test.jpg" alt="イメージ" width="138" height="111" /></a>
<map name="Map" id="Map">
<area shape="rect" coords="317,347,547,364" href="http://yahoo.co.jp/" target="_blank" /></map>

<a href="images/test2.jpg" class="fancybox"><img src="images/test2.jpg" alt="イメージ" width="138" height="111" /></a>
<map name="Map" id="Map">
<area shape="rect" coords="317,347,547,364" href="http://google.co.jp/" target="_blank" /></map>

回答No.2

tenderfeel · ベストアンサー

前の回答にあるソースの<area>にある classを削除してください。それで期待通りの動きになると思います。

お礼

無事に上手く行きました！
このたびは本当に助かりました。ありがとうございました！

回答No.1

tenderfeel

クリッカブルマップは、
対象のusemap属性で指定する値と
<map>のid属性の値が一致しないと有効になりません。
HTMLにおけるid属性は他と被らない一意なものなので、
MapというIDが複数ある状態だとうまく動きません。

なので<map>タグのIDを被らないようにすべて変更して、
fancyboxを起動する要素(<a>と<area>)に対象になるmapのID情報をつければ、
完了したときに実行されるonCompliteイベントでクリック元に応じたusemap属性が付けられるようになります。

★IDとname変更、areaのclassにもIDと同じクラスを追加する
<map name="map-1" id="map-1">
<area shape="rect" coords="7,8,38,36" href="http://jsrun.it/assets/9/Q/J/1/9QJ1n.jpg" class="fancybox map-1" />
<area shape="rect" coords="41,6,70,35" href="http://jsrun.it/assets/y/z/4/q/yz4qn.jpg" class="fancybox map-1" />
<area shape="rect" coords="75,6,103,35" href="http://jsrun.it/assets/y/2/t/Q/y2tQB.jpg" class="fancybox map-1" />
</map>

★クラス追加
<a href="http://jsrun.it/assets/o/x/g/D/oxgDY.jpg" class="fancybox map-1">
<img src="http://jsrun.it/assets/o/x/g/D/oxgDY.jpg" width="200" />
</a>

★修正したJS
$(function() {
//fancyboxを起動させる記述
$(".fancybox").fancybox({
padding:0,
margin:0,
onComplete: function(el) {
//クリックされた要素にmap-\dにマッチするclassがあるか判別
var hasMap = $(el).attr('class').match(/map\-\d/i);
if(hasMap){
$('#fancybox-img').attr('usemap', '#' + hasMap[0]);
}
}
});
});

https://gist.github.com/3554410

参考URL：

http://jsdo.it/Tenderfeel/8LHi

お礼

（※誤って補足に投稿してしまったので再投稿します）

丁寧に教えていただきありがとうございます！
この通りにしてみたところリンク自体は別々に表示する事に成功したのですが、
いざそのリンクをクリックするとURL先に飛ばす、fancyboxの画面内でローディング状態になってしまい動きが止まってしまいます…。
本当に申し訳ないのですが、解決する方法はありませんでしょうか。

補足

丁寧に教えていただきありがとうございます！
この通りにしてみたところリンク自体は別々に表示する事に成功したのですが、
いざそのリンクをクリックするとURL先に飛ばす、fancyboxの画面内でローディング状態になってしまい動きが止まってしまいます…。
本当に申し訳ないのですが、解決する方法はありませんでしょうか。