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>
