- 締切済み
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”に変更したところ、スクリプトが正常に実行されなかったのも気になっています。 原因がわかる方がいらっしゃれば、アドバイスをお願いいたします。
- adober
- お礼率67% (19/28)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
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]); } }
- fujillin
- ベストアンサー率61% (1594/2576)
複雑そうなのでコードはみてませんが、最初の説明だけを頼りにアイデアのみですが、 （全角空白は半角に） <!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.1/jquery.min.js"></script> </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を読み替えるのが面倒なので、最初に一覧を作成しています。 規則性がない場合は、初期設定で定義するようにすれば同様の方法で可能かと。
お礼
返信が遅くなりすみません。 スクリプトを実行してみましたが、問題の解決には至りませんでした…。 もう少し自分で調べてみます。 ありがとうございました。