jQueryでの画像切り替え処理について

締切済

質問者：adober
質問日時：2014/03/10 11:15
回答数：2件

前回の質問の続きになります。

一列に配置したボタンを、マウスオーバー時、クリック時にそれぞれ別の画像に切り替えたいと思っています。
（元画像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”に変更したところ、スクリプトが正常に実行されなかったのも気になっています。

原因がわかる方がいらっしゃれば、アドバイスをお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2014/03/11 13:36

ANo1です。

無駄してました。

function set(t, type){
　var d = data[images.index($(t))];
　if(!d.flag){
　　if(type == "click"){
　　　images.each(function(i){
　　　　$(this).attr("src", data[i].off);
　　　　data[i].flag = false;
　　　});
　　　d.flag = true;
　　}
　　$(t).attr("src", d[type]);
　}
}

- 0
- 件

通報する

この回答へのお礼

返信が遅くなりすみません。
スクリプトを実行してみましたが、問題の解決には至りませんでした…。

もう少し自分で調べてみます。
ありがとうございました。

通報する

お礼日時：2014/03/26 09:07

No.1

回答者： fujillin
回答日時：2014/03/11 13:10

複雑そうなのでコードはみてませんが、最初の説明だけを頼りにアイデアのみですが、

（全角空白は半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#nav img { width:134px; height:36px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9. …
</head>
<body>

<ul id="nav">
<li><img src="img/A_off.jpg" alt=""></li>
<li><img src="img/B_off.jpg" alt=""></li>
<li><img src="img/C_off.jpg" alt=""></li>
</ul>

<script type="text/javascript">
var data = [];
var images = $("#nav>li>img").each(function(i){
　data[i] = {off: $(this).attr("src")};
　data[i].on = data[i].off.replace(/_off\.jpg$/, "_on.jpg");
　data[i].click = data[i].off.replace(/_off\.jpg$/, "_off_s3.jpg");
　data[i].flag = false;
});

function set(t, type){
　var d = data[images.index($(t))];
　if(!d.flag){
　　if(type == "click"){images.each(function(i){
　　　　$(this).attr("src", data[i].off);
　　　　data[i].flag = false;
　　　});
　　}
　　$(t).attr("src", d[type]);
　　d.flag = type=="click";
　}
}

images.mouseover(function(){ set(this, "on"); })
　.mouseout(function(){ set(this, "off"); })
　.click(function(){ set(this, "click"); });

</script>
</body>
</html>

いちいちurlを読み替えるのが面倒なので、最初に一覧を作成しています。
規則性がない場合は、初期設定で定義するようにすれば同様の方法で可能かと。