javascriptを使ったロールオーバー（その後）

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

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

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

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

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

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

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

【変更前】
$(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);

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

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

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