jQueryでの画像切り替え処理について
前回の質問の続きになります。
一列に配置したボタンを、マウスオーバー時、クリック時にそれぞれ別の画像に切り替えたいと思っています。
（元画像A_offを、マウスオーバー時はA_on、クリック時はA_off_s3へと変更する。
A_off_s3の状態でマウスオーバーされた場合、A_offにはならず、A_off_s3のままとする。
A_off_s3が表示されている時に他のボタンB_offがクリックされたら、B_offはB_off_s3を、A_off_s3はA_offを表示する。）
色々なページを参考に、以下のようなスクリプトを書きました。
----------
<head>
<script type="text/javascript" src="script/jquery-1.11.0.min.js"></script>
<script>
$(function(){
var handler = $('ul#nav li a');
var url = document.URL;
var urlId = url.substr(url.lastIndexOf('#'));
var urlIdJudgment = urlId.lastIndexOf('#');
$('ul#nav').each(function(){
$('#tab-box > div:first').show();
var imgSrc = $('ul#nav li:first img').attr('src');
var imgDot = imgSrc.lastIndexOf('.');
var onSrc = imgSrc.substr(0, imgDot) + '_s3' + imgSrc.substr(imgDot, 4);
$('ul#nav li:first img').attr('src',onSrc).addClass('tab-on');
});
handler.click(function() {
var imgSrc = $(this).children('img').attr('src').replace(/_s3/g, "");
var imgDot = imgSrc.lastIndexOf('.');
var onSrc = imgSrc.substr(0, imgDot) + '_s3' + imgSrc.substr(imgDot, 4);
$(this).children('img').attr('src',onSrc);
var imgOff = $('ul#nav li img.tab-on').attr('src').replace(/_s3/g, "");
$('ul#nav li img.tab-on').attr('src',imgOff);
$('ul#nav li img').removeClass('tab-on');
$(this).children('img').addClass('tab-on');
var imgSrc = $(this).children('img').attr('src').replace(/_s3/g, "");
var imgDot = imgSrc.lastIndexOf('.');
var onSrc = imgSrc.substr(0, imgDot) + '_s3' + imgSrc.substr(imgDot, 4);
$(this).children('img').attr('src',onSrc);
return false;
})
});
$(function(){
$('a img').hover(function(){
$(this).attr('src', $(this).attr('src').replace('_off', '_on'));
}, function(){
if (!$(this).hasClass('currentPage')) {
$(this).attr('src', $(this).attr('src').replace('_on', '_off'));
}
});
});
</script>
</head>
<body onload="MM_preloadImages('img/A_off.jpg','img/A_on.jpg','img/A_off_s3.jpg','img/B_off.jpg','img/B_on.jpg','img/B_off_s3.jpg','img/C_off.jpg','img/C_on.jpg','img/C_off_s3.jpg')">
<div id="tab-box">
<ul id="nav" class="clearFix">
<li><a href="xxx"><img src="img/A_off.jpg" width="134" height="36" alt="" id="A" /></a></li>
<li><a href="yyy"><img src="img/B_off.jpg" width="134" height="36" alt="" id="B" /></a></li>
<li><a href="zzz"><img src="img/C_off.jpg" width="134" height="36" alt="" id="C" /></a></li>
</ul>
</div>
----------
上記のスクリプトで実行をすると、クリック時に？マークが表示され、カーソルが離れると○_off_s3の画像が表示されます。
また、○_off_s3の画像が表示されている時に、○_off_s3にカーソルを合わせると、？マークが表示され、カーソルが離れると○_off_s3が表示されます。
また、○_off_s3の名称をわかりやすいものにしようと思い、○_off_cに変更し、スクリプトの"_s3"を”_c”に変更したところ、スクリプトが正常に実行されなかったのも気になっています。
原因がわかる方がいらっしゃれば、アドバイスをお願いいたします。
お礼
さっそくのご回答ありがとうございます。 たしかに！ hoverのところを見落としていました！ 試しに以下のようにすると正常に動作しました。 お手数おかけしました。 $(function(){ $('.rollover').each(function(){ var img = $(this).find('img'); var src_off = img.attr('src'); var src_on = src_off.replace('_off','_on'); $('<img />').attr('src','src_on'); img.hover(function(){ img.attr('src',src_on); },function(){ img.attr('src',src_off); }); }); });