【jQuery】<a>と<area>で表示が違う

質問

よろしくお願いします。
jQueryで、<a>タグと<area>タグで表示が違ってしまいます。

http://colorpowered.com/colorbox/core/example2/index.html
上記ページの「Fade Transition」というjQueryを使ってみたのですが、

<a href="○○.jpg" rel="example2" title="タイトル">文字</a>ではうまく表示できました。
<a href="○○.jpg" rel="example2" title="タイトル"><img src="□□.jpg" width="100" height="100" /></a>でもうまく表示できました。
クリッカブルマップを使って、画像の一部だけリンクさせる場合がうまくいきません・・。

<area shape="poly" coords="14,33,33,-4,57,0,63,29,46,64,30,66" href="○○.jpg" rel="example2" title="タイトル" accesskey="A" />

上記のように記述した場合、クリッカブルマップはうまく動いて、jQueryも一応表示されるのですが、
左上の　←→×　（prev、next、close）ボタンがうまくいかないのです・・・。
添付画像のように、
・prev、nextの矢印は表示されません。
・「前へ」、「次へ」の動きもしません。
・closeの×ボタンは表示されるのですが、何回かクリックしないと閉じません。

CSSはこれで、　http://colorpowered.com/colorbox/core/example2/colorbox.css
jsはこれです。　http://colorpowered.com/colorbox/core/colorbox/jquery.colorbox.js

多分jsの方の記述に修正が必要なのかなと思っているのですが、
もしわかる方いらっしゃいましたら、教えていただきたいと思います。
jQuery初心者で恐縮なのですが、よろしくお願いいたします。

回答No.2

my-- · ベストアンサー

>> No.1 お礼

http://colorpowered.com/colorbox/

$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
...
});

No.1で提示したコードはjsファイルではなく、htmlに記述されているこの部分のことです。

<map id="map1" name="map1">
<area ...>
...
</map>

id属性に"map1"を持つmap要素が内包するarea要素すべてがグループ化されます。

$(document).ready(function(){
$('#map1 area').colorbox({ rel: 'area1', transition: 'fade' });
});

お礼

再びご回答ありがとうございます！！
記載の通りにしてみたら、うまくできました！
こんなにすっぱり解決するなんて・・感激です！
本当に助かりました。ありがとうございます。

回答No.1

my--

area要素のrel属性値をスクリプトで取れないのが原因のようです。
area要素にはない属性ですからDOMが無視してるのだと思いますが。

$('#map1 area').colorbox({ rel: 'area1' });

ユーザーオプションで設定すればグループ化できるみたいですよ。
area要素のrel属性は不要です。

お礼

ご回答いただきありがとうございます！

$('#map1 area').colorbox({ rel: 'area1' });
さっそく教えていただいた上の記述をjsファイルに入れてみたのですが、
うまくいかず・・・。
すみません、もしよろしければどのファイルのどの辺りに
書けば良いか教えていただけないでしょうか？

＞area要素のrel属性は不要です。
とのことですが、
<area shape="poly" coords="14,33,33,-4,57,0,63,29,46,64,30,66" href="○○.jpg" rel="example2" title="タイトル" accesskey="A" />

　　↓以下に変更

<area shape="poly" coords="14,33,33,-4,57,0,63,29,46,64,30,66" href="○○.jpg" title="タイトル" accesskey="A" />

ということでしょうか？
そのようにやってみたのですが、うまくいかず・・。
せっかく教えていただいたのに申し訳ありません。