【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初心者で恐縮なのですが、よろしくお願いいたします。
お礼
ご回答いただき、ありがとうございます。 お教えいただいた内容のものを実装できました！ 本当に助かりました。 元々のjsファイルと見比べて、どこを変更されているのか、 ぜひ勉強させていただきたいと思います。 ありがとうございました！