- 締切済み
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を読み替えるのが面倒なので、最初に一覧を作成しています。 規則性がない場合は、初期設定で定義するようにすれば同様の方法で可能かと。
関連するQ&A
- jqueryサブウィンドウにて画像切替サブ画像表示
質問お願いします。 元ページのサムネイル画像をクリックすると サブウィンドウが開き、この中でクリックした先ほどサムネイルの拡大画像を表示、他のサムネイル画像も表示し、サムネイルをクリックで拡大画像を切り替え、それぞれの画像に応じたサブ画像も表示させたいと思っています。 一番はクリックデータをサブウィンドウにもっていく方法がわかりません。 イメージで元ページ内での切替をやってみました <style> li img{width:100px;height:100px;} </style> ----jquery----- <script type="text/javascript"> $(function(){ $('li img').click( function(){ $('#main img').attr('src',$(this).attr('src')); $('#sub').text($(this).attr('title')); var postfix = '_on'; var src = $(this).attr('src'); var src_on = src.substr(0, src.lastIndexOf('.')) + postfix + src.substring(src.lastIndexOf('.')); $('#sub2 img').attr('src',src_on); }); }); </script> ---html---- <ul> <li><img src="red.jpg" title="赤"></li> <li><img src="blue.jpg" title="青"></li> <li><img src="winter.jpg" title="冬"></li> <li><img src="green.jpg" title="緑"></li> </ul> <div id="main"><img src="red.jpg" id="mainimg"></div> <p id="sub">赤</p> <p id="sub2"><img src="red_on.jpg"></p> 質問が分かりづらいかもしれませんが、よろしくお願いします。
- ベストアンサー
- JavaScript
- JQueryを使ってcssを書き換え
何となくコードを見てさわる程度の初心者です。 以下のようなソースを組みました。 <div id="slide"> <a href="01.htm"><img src="01.jpg" alt="01" id="alttxt" /></a> </div> <div id="slidenavi"> <ul> <li><a href="01.html"><img src="s_01.jpg" alt="01" class="b_01.jpg" /></a><span class="active"></span></li> <li><a href="02.htm"><img src="s_02.jpg" alt="02" class="b_02.jpg" /></a><span class="active"></span></li> <li><a href="03.html"><img src="s_03.jpg" alt="03" class="b_03.jpg" /></a><span class="active"></span></li> </ul> </div> #slideがメインエリアで、#slidenaviがメインエリアの画像とリンク先を切り替えるナビゲーションボタンになっています。 ナビに連動したメインエリア用の画像ファイル名は #slidenavi の img の classに入れておいて、それを読み込んで代入するというおかしなやり方で呼び出していますが、ここまではうまくいきました。 問題はここからです。 最初の状態では<span class="active"></span>はcssの設定でdisplay: noneとしてあります。 そして#slidenaviのボタンにマウスが乗ると、その部分の<span class="active"></span>をdisplay: blockとして表示したいのですが、これがどうしてもうまくいきません。 この部分も含めて、おかしな書き方になっている部分があれば教えてもらえないでしょうか。 jsファイルは以下の通りです。 $(function(){ $('#slidenavi ul li a').fadeTo(0,0.4); $('#slidenavi ul li a').hover(function(){ $(this).fadeTo(300,1.0); }, function(){ $(this).fadeTo(300,0.4); }) $('#slidenavi ul li img').mouseover(function(){ var bglink = $(this).attr("class"); var altTxt = $(this).attr("alt"); $("#slide img").attr("src","images/home/main/"+bglink); $("#slide img").attr("alt",altTxt); $("#slide span.active").css("display","block"); }); $('#slidenavi ul li a').mouseover(function(){ var Href = $(this).attr('href'); var Tget = $(this).attr('target'); $("#slide a").attr("href", Href); $("#slide a").attr("target", Tget); $("#slide a").click(function() { window.open(Href,'_self'); return false; }); }); });
- ベストアンサー
- JavaScript
- jQuery マウスオーバーのたびに処理を繰り返す
よろしくお願いします。 jQueryを使用して、「サムネイルにマウスを乗せると別のDiv内に大きい画像とtitle属性のテキストを表示させる」というものを作ろうとしています。 別のDiv要素には上下左右中央に画像を表示させたいと思い、見よう見まねで下記のようなコードを作成したのですが、表示される画像がサムネイル時の大きさに縮小されてしまい、元の大きさの画像として表示されません。（サムネイルには元画像をcssで縮小して表示しています） やりたいことは以下の２つです。 ・Div要素には元画像の大きさで表示させたい。 ・できれば、フェードイン・アウトで画像を切り替えたい。 色々調べてみたのですが行き詰ってしまい、こちらに質問させて頂きました。 お分かりになる方がいらっしゃいましたら、お知恵をお貸し頂けませんでしょうか。 ////スクリプト//// $(function(){ $('#contents li a').click(function(){ return false; }); $('#contents li a').mouseover(function(){ var $title = $(this).children('img').attr('title'); var w = $(this).children('img').width(); var h = $(this).children('img').height(); $('#photo img').attr('src',$(this).attr("href")); $('#photo span').text($title); var mtop = (h/2)*(-1); var mleft = (w/2)*(-1); $('#photo img').css({"width": + w + "px" ,"height": + h + "px" , "top": "50%" , "left": "50%" , "margin-top": + mtop + "px" , "margin-left": + mleft+ "px"}); }); }); ////HTML//// <div id="contents"> <ul> <li><a href="1.jpg"><img src="1.jpg" title="あああああああああああああああ" /></a></li> <li><a href="2.jpg"><img src="2.jpg" title="いいいいいいいいいいいいいいい" /></a></li> <li><a href="3.jpg"><img src="3.jpg" title="ううううううううううううううう" /></a></li> </ul> </div> <div id="photo"> <img src="1.jpg" /> <span>テキストテキスト</span> </div>
- ベストアンサー
- JavaScript
- 画像を使用したタブを複数設置
下記、サイトを参考にタブ切り替え式のjQueryを設置しました。 http://web.showjin.me/2011/05/jquery_tab_image.html これを同じファイル内に複数設置したく 同じscriptをjsファイルに3つコピーし 設置しましたが、エラーで動かなくなったので 各、ul.btn_tab li aのtab部分tab01、tab02、tab03とし、 .container_tabをcontainer_tab01～03、 a.selectedをa.selected01～03と それぞれ変更してみました。 上記の方法で動作は実現できたのですが、 これをもっとスマートなscriptにする方法があればご教授頂けないでしょうか。 どうぞ宜しくお願い致します。 id、classを修正し、以下を3パターン設置しています。 javascript ================ /* クリックしたときに出る点線を防ぐ（IE対策）*/ $(function(){ $("ul.btn_tab li a").focus(function(){ $(this).blur(); }); }) /* タブボタンのon/offとタブの内容を切り替える */ $(function(){ /* 初期設定 */ $("a.selected img").attr("src",$("a.selected img").attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2")); $(".container_tab div:not("+$("ul.btn_tab li a.selected").attr("href")+")").hide(); /* クリック時の処理 */ $("ul.btn_tab li a").click(function(){ // 今のul.btn_tab li a.selectedのhrefの値を保持しておく var name1=$("ul.btn_tab li a.selected").attr("href"); $("a.selected img").attr("src",$("a.selected img").attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")); $("ul.btn_tab li a").removeClass("selected"); $(this).addClass("selected"); /* クリックした画像はmouseoverで_onが付けられているので、そのままだと_on_onとなり、画像へのパスが通らなくなる。 なので、今付いている_onをいったん削除してから再度_onを付け直す */ $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")); $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2")); // 保持しておいたhrefの値のdivの内容がフェードアウトしたら、クリックされたボタンのhrefの値のdivの内容をフェードインする $(name1).fadeOut(500,function(){ // クリックされたul.btn_tab li a.selectedのhrefの値を保持 var name2=$("ul.btn_tab li a.selected").attr("href"); $(name2).fadeIn(500); }); return false; }) }) /* マウスオーバー時の処理 */ $(function(){ $("ul.btn_tab a").mouseover(function(){ /* セレクタがついているかどうかの条件判断はマウスオーバーとマウスアウトのそれぞれに対して設定する。 マウスオーバー時だけだと、クリックした後、マウスアウトするときに_onが外されて通常時の画像になってしまうため */ var className = $(this).attr('class'); if(className!='selected'){ $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2")) } }).mouseout(function(){ var className2 = $(this).attr('class'); if(className2!='selected'){ $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")) } }) })
- ベストアンサー
- JavaScript
- jQueryを使ってある画像を別の画像に置き換えたい。
jQueryを使ってある画像を別の画像に置き換えたい。 jQueryを使って、<body class="info">の時にだけ <ul id="global-nav">の中の画像「info.gif」を「info_on.gif」に 置き換えるということをしたいです。 <body class="info"> <ul id="global-nav"> <li><img src="info.gif" /></li> <li><img src="about.gif" /></li> </ul> </body> ↓↓↓ <body class="info"> <ul id="global-nav"> <li><img src="info_on.gif" /></li> <li><img src="about.gif" /></li> </ul> </body> どのように記述をしてやるとうまくいきますでしょうか。 色々試しているのですがうまくいきません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- $(this)を変数に入れないと動作しない理由
「WebデザイナーのためのjQuery入門」という書籍でjQueryの勉強をしています。 リンク先 http://gihyo.jp/book/2012/978-4-7741-4856-4 この書籍の中のロールオーバーボタンのスクリプトで質問があります。 以下のスクリプトは書籍に載っているスクリプトですが、これにより画像ボタンにポインタがのる・のらないでボタン画像が切り替わります。 --------------- $(function(){ $('.rollover').each(function(){ var a = $(this); var img = a.find('img'); var src_off = img.attr('src'); var src_on = src_off.replace('_off','_on'); $('<img />').attr('src','src_on'); a.hover(function(){ img.attr('src',src_on); },function(){ img.attr('src',src_off); }); }); }); --------------- htmlは以下になります。※<body>内のみ抜粋 --------------- <body> <div class="header"> <ul class="menu"> <li><a href="index.html" class="rollover"><img src="menu01_off.png" alt="Home"></a></li> <li><a href="index.html" class="rollover"><img src="menu02_off.png" alt="Products"></a></li> <li><a href="index.html" class="rollover"><img src="menu03_off.png" alt="Company"></a></li> </ul> </div> </body> --------------- 質問したいのは、スクリプトの上から3行目の「var a = $(this);」です。 var a = $(this); var img = a.find('img'); 上記を、 var img = $(this).find('img'); とした場合、なぜか画像が切り替わりません。 どちらも同じような気がするのですが、不具合の原因が分かりません。 お分かりの方がいっらしゃいましたら、お手数ですがご回答よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 初心者です jQueryのマウスオーバーについて
jQueryを使った画像を使ったメニューを作成しています。 <ul class="drop2">をマウスオーバーしたときに親の位置にある画像１.gifが画像１_o.gifに 切り替わるようにしたいと思っています。 調べながら作ってみたのですが、画像の切替がうまくいきません。 parentを使わずに画像1.gifをdivで囲って指定すれば切り替わったのですが、2つ以上メニューを 作ると、他のulにマウスオーバーしたときも切り替わってしまいます。 ご教授して頂けると嬉しいです。 よろしくお願いいたします。 ■スクリプト部分 jQuery(function ($) { $('ul.drop2').mouseover(function () { // console.log('mouseover'); デバック用 var onSrc = $（this).parent('ul.drop1 a img').attr('src').replace('.gif', '_o.gif'); $（this).parent('ul.drop1 a img').attr('src', onSrc); }); $('ul.drop2').mouseout(function () { var onSrc =$（this).parent('ul.drop1 a img').attr('src').replace('_o.gif', '.gif'); $（this).parent('ul.drop1 a img').attr('src', onSrc); }); }); ■html部分 <ul class="drop1"> <li><a href="/"><img src="画像1.gif" alt="HOME" /></a> <ul class="drop2"> <li><a href="#"><img src="画像1-1.gif" alt="HOME" /></a></li> <li><a href="#"><img src="画像1-2.gif" alt="HOME" /></a></li> </ul> </li> </ul>
- ベストアンサー
- JavaScript
- jqueryでの画像表示について
どなたか教えて頂ければ幸いです。 画像のプリロードをするためjqueryを書いているのですが、 うまくいかず助けて頂きたくまいりました。 <div id="slideshow" class="clearfix"> <ul class="slider clearfix"> <li><a href="#"><img src="img/dress1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress2.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress3.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress4.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress5.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress6.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress7.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress8.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress9.jpg" alt="" /></a></li> </ul> </div> $('#slideshow .slider li').hide();//ページ上の画像を隠す var i = 0; var c = 0; $(window).bind("load", function() { var c = setInterval(showImg() , 500); }); function showImg() { var imgLength = $('#slideshow .slider li').length; if (i >= imgLength) { clearInterval(c); } $('#slideshow .slider li:hidden').eq(0).fadeIn(500); i++; } 上記のように書いたのですが、ループしてくれません。 i++がきいてないように思います。 一枚ずつ表示していき、非表示の最初のliにフェイドインさせるようにしています。 すみませんが教えて頂ければ幸いです。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- jQueryの隣接セレクターが上手く動作しない
jQueryを用いてギャラリーのページを作成しています。 ページのイメージは上部にサムネイル画像が並べてあり、その下にクリックされたサムネイル画像に対応する大きな画像を表示するというものです。その中で隣接セレクターが上手く動作せず悩んでいます。どなたか教えていただきたく、よろしくお願いいたします。 具体的には HTML部分 <\-- サムネイル部分 --> <div id="navi"> <ul> <li> <a href="images/img1.jpg"><imgsrc="images/img1_thum.jpg" alt="作品１" /></a> </li> ： ： </ul> </div> <\-- 大きな画像表示部分 --> <div id="main"> <img src="とりあえず最初の作品のパス" alt="最初の作品"/> </div> jQuery部分 $(function(){ $("#navi a").click(function(){ var filename=$(this).attr("href"); var altname=$("+img",this).attr("alt"); ： ： ここで、filenameには a要素のhref属性の値が入るのですが、altnameが undefined になってしまいます。 私は $("+img",this).attr("alt"); で this (この場合はa要素)の次のimg要素のalt属性 (たとえば「最初の作品」)が返ると考えているのですがなにが間違っているのでしょうか？
- ベストアンサー
- JavaScript
- jqueryの質問です
jqueryで .tes01と.tes02は同じ番目をセットと考え .tes01 の画像をクリックした時に .tes02のリンクをクリックした状態にしたいと思っています。 .tes02のURLの取得は出来たのですがそれ以降が出来ないので教えてもらえますでしょうか。 $(function(){ $("ul.tes01 li").click(function(){ var tes01li = $(this).index(); var tes02li = $(".tes02 li").find("a").eq(tes01li).attr("href"); tes02li.click(); }); }); <ul class="tes01"> <li><img src="img01"></li> <li><img src="img02"></li> <li><img src="img03"></li> <li><img src="img04"></li> </ul> <ul class="tes02"> <li><a href="#link01">link01</a></li> <li><a href="#link02">link02</a></li> <li><a href="#link03">link03</a></li> <li><a href="#link04">link04</a></li> </ul>
- ベストアンサー
- JavaScript
お礼
返信が遅くなりすみません。 スクリプトを実行してみましたが、問題の解決には至りませんでした…。 もう少し自分で調べてみます。 ありがとうございました。