javascriptを使ったロールオーバー(その後)

ハッピーターンのパウダー300%が出ないかと心待ちにしてるYu-ichiです:neko:

前回ご紹介したjavascriptを使ったロールオーバーですが、やはり便利です。
生産性もわずかながら上がっている気がしています。

どんなサイトでも使えて便利だ!:cat_5:
と思っていたのですが、意外な落とし穴がありました。。。:cat_6:

それは・・・Wordpressとの相性。:baikin_1:

普通に使う分には何ともないのですが、
prototype.jsと併用したときにスクリプトエラーが発生してしまいます。:naku:
どうやら、prototype.jsjQuery競合してしまうみたいです。:ikari:

回避するにはまず、prototype.js → jQueryの順番で記述してください。
読み込む順番が大切です。:kaomoji4:

その後、前回の「roll.js」とか適当な名前で作成したスクリプトに、おまじないをかけます。:kaomoji6:
赤文字の個所が変更点です。

【変更前】
$(function(){
$(“img.
o_o“).mouseover(function(){
$(this).attr
(“src”,$(this).attr(“src”).replace(/^(.+)(\.[a-z]+)$/, “$1_o$2″))
}).mouseout(function(){
$(this).attr
(“src”,$(this).attr(“src”).replace(/
^(.+)_o(\.[a-z]+)$/, “$1$2”));
}).each(function(){
$(“<img>”).attr
(“src”,$(this).attr(“src”).replace(/^(.+)(\.[a-z]+)$/, “$1
_o$2″))
})
})

【変更後】
(function($){
$(function(){
$(“img.o_o“).mouseover(function(){
$(this).attr
(“src”,$(this).attr(“src”).replace(/^(.+)(\.[a-z]+)$/, “$1_o$2″))
}).mouseout(function(){
$(this).attr
(“src”,$(this).attr(“src”).replace(/^(.+)_o(\.[a-z]+)$/, “$1$2”));
}).each(function(){
$(“<img>”).attr
(“src”,$(this).attr(“src”).replace(/^(.+)(\.[a-z]+)$/, “$1_o$2″))
})
});
})(jQuery);

とりあえずこれで解決しています:neko:

他にも組み合わせによっては不具合が起こるかもしれませんが、
ひとまず、同じ現象でお悩みの方はお試しあれ~:nikukyu:

では、恒例のブログランキングクリックをお願いします:kaomoji6:
:onegai: :yubiright:  :yubileft:

トラックバックURL

javascriptを使ったロールオーバー(その後)」への2件のフィードバック

  1. bluesound より:

    :wa-i:
    上記の説明通り試させてもらったらできました!マジ助かりました!めちゃくちゃ悩んでたので本当にうれしいです。ありがとうございました!

  2. Yu-ichi より:

    >bluesoundさん
    コメントありがとうございます :neko:
    お役にたてて光栄です。