ページによってロールオーバーが機能しない
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();
});
ご存知の方がいらっしゃいましたら対策を教えてください。
お願いいたします！
