map とlightbox

以下のようにグーグルマップのように地図上のマークをクリックするとlightboxで画像がでるように
したんですが機能しません。この組み合わせはだめなのでしょうか？　或いは他の方法があるんでしょうか？　出来ればマークを触れると画像がポップアップする方がいいのですが。


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>

<div><img src="images/map.png" alt=""
usemap="#map" border="0"/></div>
<div id="gallery">
<map name="map">
<area href="images/jtb.jpg"　title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();" target="_blank" shape="rect" coords="193,399,245,423" />
</map>

</div>

No.3 ベストアンサー 回答者： yyr446 回答日時： 2011/03/16 14:41

>試してみましたが、lightboxが機能しませんでした。

あれ、だめですか。
jQuery版のlightboxじゃなく、prototype.js版の「Lightbox2」
http://www.huddletogether.com/projects/lightbox2/
で FirefoxでOKだったんですけど、もしかして別物なのかもしれませんね。
それに<area>が無いと、IEとかでそもそもマップにならないし。

この回答へのお礼

yyr446様

なるほどprototype.js版の「Lightbox2」を使うわけですか
でも他のQueryとバッティングしそうです。
ありがとうございます。

お礼日時：2011/03/16 15:19

No.2 回答者： yyr446 回答日時： 2011/03/16 13:16

失礼しました、<area>でマークアップするとだめですね。

↓です。
<div>
<images/map.png" alt="" usemap="#map" border="0" usemap="#map">
<map id="map" name="map">
<div>
<a rel="lightbox" href="images/jtb.jpg"　title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();" target="_blank" shape="rect" coords="193,399,245,423"></a>
</div>
</map>
</div>

この型式のイメージマップに対応してないブラウザーはだめですが．．．

この回答への補足

yyr446さんありがとうございます。

試してみましたが、lightboxが機能しませんでした。
結局だめという事でしょうか？

補足日時：2011/03/16 13:46

No.1 回答者： yyr446 回答日時： 2011/03/16 13:10

$('#gallery a').lightBox();

じゃだめですね。
↓こうしとけば、一応動作します。

<area rel="lightbox" href="images/jtb.jpg"　title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();" target="_blank" shape="rect" coords="193,399,245,423" />