-PR-
  • 困ってます
  • 質問No.6815875
解決
済み

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

  • 閲覧数1289
  • ありがとう数2
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 85% (66/77)

よろしくお願いします。
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初心者で恐縮なのですが、よろしくお願いいたします。
  • 回答数2
  • 気になる数0

質問者が選んだベストアンサー

  • 回答No.2
レベル10

ベストアンサー率 89% (91/102)

>> 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' });
});
お礼コメント
hanami873

お礼率 85% (66/77)

再びご回答ありがとうございます!!
記載の通りにしてみたら、うまくできました!
こんなにすっぱり解決するなんて・・感激です!
本当に助かりました。ありがとうございます。
投稿日時 - 2011-06-17 19:40:42
  • ありがとう数0
-PR-
-PR-

その他の回答 (全1件)

  • 回答No.1
レベル10

ベストアンサー率 89% (91/102)

area要素のrel属性値をスクリプトで取れないのが原因のようです。 area要素にはない属性ですからDOMが無視してるのだと思いますが。 $('#map1 area').colorbox({ rel: 'area1' }); ユーザーオプションで設定すればグループ化できるみたいですよ。 area要素のrel属性は不要です。 ...続きを読む
area要素のrel属性値をスクリプトで取れないのが原因のようです。
area要素にはない属性ですからDOMが無視してるのだと思いますが。

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

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

お礼率 85% (66/77)

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

$('#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" />

ということでしょうか?
そのようにやってみたのですが、うまくいかず・・。
せっかく教えていただいたのに申し訳ありません。
投稿日時 - 2011-06-17 18:51:49
  • ありがとう数0
  • 回答数2
  • 気になる数0
このQ&Aで解決しましたか?

関連するQ&A

-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ