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);
とりあえずこれで解決しています
他にも組み合わせによっては不具合が起こるかもしれませんが、
ひとまず、同じ現象でお悩みの方はお試しあれ～
では、恒例のブログランキングクリックをお願いします
ネットインパクトでは、格安なCMSやWordpressを利用したウェブサイトの制作から運営管理も自社で簡単にできるショッピングサイトの構築も行っています。ご相談・お見積りは無料です。お気軽にお問合わせください。
ネットインパクトでは、格安なCMSやWordpressを利用したウェブサイトの制作から運営管理も自社で簡単にできるショッピングサイトの構築も行っています。ご相談・お見積りは無料です。お気軽にお問合わせください。
ウェブサイトの新規作成からリニューアル、インターネットショップの構築までお客様のご要望にお応えし、お客様のWEB事業のお手伝いをさせていただきます。
上記の説明通り試させてもらったらできました！マジ助かりました！めちゃくちゃ悩んでたので本当にうれしいです。ありがとうございました！
コメント by bluesound — 2011/3/15 火曜日 @ 21:11:11
＞bluesoundさん
コメントありがとうございます
お役にたてて光栄です。
コメント by Yu-ichi — 2011/3/16 水曜日 @ 10:25:18