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);
とりあえずこれで解決しています
他にも組み合わせによっては不具合が起こるかもしれませんが、
ひとまず、同じ現象でお悩みの方はお試しあれ～
では、恒例のブログランキングクリックをお願いします
お客様のニーズに合わせたホームページの作成から制作後のSEO対策までサポート。Flashの制作やCGIの設置代行、バナーの制作など各種WEBコンテンツからメルマガ、ビジネスブログなどのウェブシステムの構築も安心価格でご提供致します。
お手頃価格で結果の出るホームページをつくります。さまざまな業種での制作実績がございます。はじめてウェブサイトをつくる方からネット販売をはじめたい方までお客様のニーズに合わせたホームページを低価格で構築致します。
さまざまな業種のWEBサイトを作成。ホームページの企画から制作、検索エンジン上位表示まで一貫した制作体制で、WEBビジネスを支援します。
上記の説明通り試させてもらったらできました！マジ助かりました！めちゃくちゃ悩んでたので本当にうれしいです。ありがとうございました！
コメント by bluesound — 2011/3/15 火曜日 @ 21:11:11
＞bluesoundさん
コメントありがとうございます
お役にたてて光栄です。
コメント by Yu-ichi — 2011/3/16 水曜日 @ 10:25:18