ページによってロールオーバーが機能しない

質問

javascriptを使用して、カーソルがあたった時に色が変わる
ロールオーバーを実現しているサイトを作りました。
ところが、ページによってロールオーバーが機能しません。
すべて同じソースをコピペしただけなのですがこれが原因ですか？
サイトは複数ページあり、機能するものとそうでないもので
置かれている階層が異なるものもあります。
他のjavascriptも記述されているのですが、それらが影響しているのでしょうか？

ちなみに下記のようなソースです。(一部抜粋)

【HTML】
<div id="a">
<a href=""> <img src="test.png" />
</a>

<ul>
<li>
<a href="00.html"><img src="test2.png" class="rollover" /></a>
</li>
</ul>
</div>

【javascript】
$.fn.rollover = function() {
return this.each(function() {
// 画像名を取得
var src = $(this).attr('src');
//すでに画像名に「_on.」が付いていた場合、ロールオーバー処理をしない
if (src.match('_on.')) return;
// ロールオーバー用の画像名を取得（_onを付加）
var src_on = src.replace(/^(.+)(\.[a-z]+)$/, "$1_on$2");
// 画像のプリロード（先読み込み）
$('').attr('src', src_on);
// ロールオーバー処理
$(this).hover(
function() { $(this).attr('src', src_on); },
function() { $(this).attr('src', src); }
);
});
};

// 画像をロールオーバーする箇所を指定
$(function() {
$('.rollover').rollover();
});

$(document).ready(function(){
$('.bxslider').bxSlider();
});

ご存知の方がいらっしゃいましたら対策を教えてください。
お願いいたします！

回答No.2

play_with_you

<script>タグが書かれてないので憶測ですが、パスは合ってますか？
質問文を見る限り同じディレクトリでも起きてるようなのでそれが原因ではない気もしますが。

回答No.1

fujillin

ご提示の部分を単独で見る限りでは、一般的なブラウザでは動作すると思われます。
それなので、動作しない原因として考えられるのは、セッティングや環境が違っているとかの違いがありませんか＞

とりあえず思いつくのは…
1）ご提示のコードは何らかのライブラリ（不明）を利用していると思われますので、ページによってそのライブラリを読み込む処理をスクリプト実行前に行なっていないと動作しないことが考えられます。（その意味も含めて言えば、ご提示のコードだけをコピペしても動作しません）
2）ロールオーバー時の画像は通常画像と同じディレクトリに同じ名前（拡張子も含めて）で、「_on」だけ後に付加えた名称になっていないと画像が表示できませんが、その画像が存在しない又はディテクトリが違っている。
3）画像は正しい位置にあるが、実は同じ画像が名称を変えただけになっている。（ロールオーバーは行なわれているものの、画像が同じなので見かけ上変わって見えない）
4）新しい画像をアップしているのだけれど、別画像（=3のような画像）のキャッシュがすでにクライアントに保存されているため、新しい画像が反映されず、結果的に3）と同じようになっている。

あと、ほかに気になったのは、　$('.bxslider').bxSlider();　なるセンテンスがご提示の中にありますが、bsSlider側の処理で、画像のDOMを再定義したり書き直していたりする場合は、それが共通するが像であったりする場合、そのスクリプトがrolloverの処理の実行後であると、ロールオーバーを設定した要素が残っていない（あるいは非表示）ので、ロールオーバーの処理が行なわれないということもあり得ます。

この（↑）ようなケースも考えられますが、最後の原因によるものかどうかを特定をするなら、
　　$('.bxslider').bxSlider();　
をコメントアウトするなどで実行しないようにして、確認してみればすぐにわかるでしょう。それで動作するならば、bxSliderの処理と何らかの形で干渉している可能性が高いと想像できます。

あるいは複数のライブラリを使用していて、そちらが干渉してしまっているとか…
（よくある、jQueryとprototypa)の干渉など。