JavaScriptで画像をクリックで切り替える方法

前へ 次へ
このQ&Aのポイント
  • JavaScriptを使用して、画像をクリックすることで切り替える方法について質問です。
  • 現在の記述では、hoverイベントを使用してマウスオーバー時に画像が切り替わるシステムですが、クリック時にも同様の動作をさせたいです。
  • クリックに変更したところ、動作しなくなってしまいました。対処方法を教えてください。
回答を見る
  • ベストアンサー

javascript 画像をクリックで切り替える

javascriptについて質問させていただきます。 <script type="text/javascript" defer> $(function(){ $('.thmbnail').hover( function(){ $("#product_large_image").attr('src', $(this).attr('src')); }, function(){ $("#product_large_image").attr('src', $("#product_large_image").attr('data-image-source')); } ); }); </script> こちらが現在の記述です。 画像のパスを指定できないため、.thmbnailと#product_large_imageで指定しているようです。 ＃product_large_imageは <img id="product_large_image" class="large" src="@(imageUrl)?@ViewBag.RCC" data-image-source="@imageUrl" alt="" /> .thmbnailは <img class="thmbnail" src="@(imgPath)?@ViewBag.RCC" alt="" /> となっており、画像のパスが変動するシステムです。 現在の記述はhoverによってマウスオーバーで画像が切り替わるシステムなのですが、 これをクリックで切り替わるようにしたく、 hoverをclickに変えたところ、 動かなくなってしまいます。 対処法を教えていただければと存じます。 よろしくお願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

hoverをclickに変えただけじゃ動かないわよ hoverの第１引数は、マウスオーバーしたときの処理 第２引数は、マウスアウトしたときの処理を記述しているの でもclickはそもそも第２引数がないの 第１引数に、クリックしたときの処理を書くだけなの なので、第１引数のfunction内に 画像を切り替える処理を書かないとダメ もしもclickするごとに入れ替えるのなら 現在の画像がどっちかを確認するようなことも必要ね このつくりならsrc属性とdata-image-sourceを入れ替えるだけで よさそうだけど

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • こんにちは、javascriptにてボタンを押すと画像が透明度が下がる

    こんにちは、javascriptにてボタンを押すと画像が透明度が下がる動きを作っています。 ボタンを押すとフェードアウトはできるのですが、フェードアウトした画像を 元の透明度にフェードインすることが出来ません。 if文のclassに書かれている変数の扱いがよくわからないので、質問させて頂きました。 forで回してカウントから取得してみようかと,すべての画像に<p class＝"fade1">のような タグをすべての画像に付けて、javascript記述できればと思っていましたが、classの指定が $(".fade+i img")等と指定してみましたが、動きませんでした。 適切な方法がありましたら、教えてください。よろしくお願いします。 【html】 <div class="thumbnail"> <img src="g_images/IMG_1470.jpg" alt="画像1" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02564.JPG" alt="画像2" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02227.JPG" alt="画像3" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02555.JPG" alt="画像4" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02558.JPG" alt="画像5" class="item-image" hspace="5" vspace="3" /> </div> 【javascript】 $(document).ready( function(){ $(".thumbnail img").click(function(){ if($(".thumbnail img").css("opacity")!=1.0){ $(".thumbnail img").fadeTo("normal", 1.0); // マウスオーバーで透明度を60%にする } $(this).fadeTo("normal", 0.4); // マウスオーバーで透明度を60%にする }); });

  • メニューボタン画像のロールオーバー時の処理について

    以下のスクリプトを用いてドロップダウンメガメニューを作成しています。 jQuery MegaMenu Plugin http://www.geektantra.com/2010/05/jquery-megamenu-2/ このメニューのボタンを画像にし、ロールオーバー時には透過して背景が見えるようにしたいと考えています。 --------------------------------------- <script type="text/javascript" src="/_js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/_js/jquery.megamenu.js"></script> <script type="text/javascript"> $(function() { .find('img.btn').hover( function(){ $(this).stop().animate({'opacity' : '0'}, 200); }, function(){ $(this).stop().animate({'opacity' : '1'}, 500); } ); }); </script> <ul id="megamenu"> <li> <a><img src="../_images/btn_01.jpg" alt"ボタン1" class="btn"/></a> <div>コンテンツA</div> </li> <li> <a class="mm-item-link-hover"><img src="../_images/btn_02.jpg" alt"ボタン2" class="btn"/></a> <div>コンテンツB</div> </li>↑※このメニューにロールオーバーしている場合、class="mm-item-link-hover"がaに追加される。 <li> <a><img src="../_images/btn_03.jpg" alt"ボタン3" class="btn"/></a> <div>コンテンツC</div> </li> </ul> ------------------------------------- 上記のように記述して、ボタン画像にロールオーバーするとドロップダウンメニューが出現、さらにそのボタン画像が透過し、背景が見えるようにできました。 しかし、画像からマウスをおろしてドロップダウンメニューに移動すると透過が戻ってしまいます。 jquery.megamenu.jsの処理で、ドロップダウンメニューにロールオーバーしている間、class="mm-item-link-hover"がaに追加されています。 これを利用して、a.mm-item-link-hoverのなかのimg.btnを透過GIFに置き換えたいと思いましたが、うまく行きません。 【追加したスクリプト】 $(function() { $("a.mm-item-link-hover").each(function() { $("img.btn").attr("src", "/img/blank.gif"); }); }); 上記の処理の方法は、考え方としては正しいでしょうか？ また、その場合のスクリプトはどのように書けばよろしいでしょうか？ ご教授頂けると非常に助かります。

  • 画像スライダーについて

    <script type="text/javascript"> <!-- $(function(){ setInterval(function(){ $("#s3 p").attr("img"$("src")); },3000); }); --> </script> このやり方だと、時間で画像が変化しませんかね？

  • jQuery 記述方法

    今、webサイトを作っていてjQueryを使用しようとしています。 しかし、うまくできません。外部にjavascriptファイルを置いています。 やりたいことは、ナビゲーションのロールオーバーです。 javascriptは初心者なのでどこが間違っているまたは足りないのかわかりません。以下に必要だと思うものを記述しますので分かる方がおりましたら教えてください。 javascriptファイルとjquery-1.6.4.min.jsはhtmlと同フォルダ内にあります。またimgフォルダ内に画像と拡張子の前に_onを付けた画像を入れています。 HTML <head> <script type="text/javascript" src="./jquery-1.6.4.min.js"></script> <script type="text/javascript" src="park.js"></script> </head> <body> <p><a href="index.html"> <img alt="top" height="50" class="navi" src="img/top.gif" width="100" /></a></p> </body> javascript $(function(){ $ ("img.navi").mouseover(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)(￥.{a-z]+)$/,"$1_on$2")); }).mouseout(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)_on(￥.{a-z]+)$/,"$1$2")); }).each(function(){ $("<img>").attr("src",$(this).attr("src") .replace(/^(.+)(￥.{a-z]+)$/,"$1_on$2")); }); ]); です。 よろしくお願いします。

  • このjqueryが稀に動かない

    画像が無いときに表示されるscriptですが稀に動かない時があります１０分の４位動かないです。どのようにすればよろしいでしょうか？ <script type="text/javascript" src="/kadenkoujiya1242/js/jquery.js"></script> <script type="text/javascript" src="/kadenkoujiya1242/js/noimg.js"></script> $(function () { $('img').error(function(){ $(this).attr({src:'/kadenkoujiya1242/img/noimg.png',alt:'画像が見つかりません'}); }); });

  • $(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について

    友人がJavaScriptに苦戦しています。 ボタンをクリックすると、画像が表示されるプログラムを作りたいそうです。以下、送られて来たコードです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="box"><!--attr (DOMのsetAttributeと同じ)--> <script> addEventListener("load",()=>{ document.getElementById("btn").addEventListener("click",()=>{ //$("img").attr("src","./image.jpg"); document.getElementById("aa").style.color = "white"; document.getElementById("img").style.backgroundImage = "./image.jpg"; }); }); </script> <button id="btn">ここをクリックで画像表示</button> <p id="aa">aa</p> <img id="img"> </div> </body> </html> なぜかボタンをクリックしても、画像が表示されません。なぜなのでしょうか？教えて頂きたく思います。

  • １つのファイルで画像をクリックしたら差し代わる方法

    表題のようにJavascriptで１つのhtmlファイルで複数の箇所に違う画像があり、それをクリックしたら別の画像に差し代わるということをしたいのですが、中々うまくいかずに困ってしまっています。 下記のようなソースになった場合にそれぞれ別の画像でクリックしたら違う画像に差し替えるには関数等の書き方はどのようにすれば宜しいのでしょうか。 どなたか教えてもらえますでしょうか？ Javascript初心者にて失礼しますm(_ _)m 下記に途中までやったソースがあるのですが、行き詰ってしまってます。。。。。 宜しくお願い致します。m(_ _)m　m(_ _)m ・・・・・・・・・・・・・ JavaScriptは下記の通りです。 //１つ目の画像に関係するJavaScriptです <script language="JavaScript"> num = 2; nme = "image/index"; exp = "jpg"; cnt = 0; function changeImage() { cnt++; cnt %= num; document.index.src = nme + cnt + "." + exp; } </script> //２つ目の画像に関係するJavaScriptです <script language="JavaScript"> num = 2; nme = "image/img"; exp = "jpg"; cnt = 0; function changeImg() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } </script> htmlは下記の通りです。 <!--１つ目の画像です--> <a href="JavaScript:changeImage()"> <img src="image/index0.jpg" name="index" border="0"></a> <!--２つ目の画像です--> <a href="JavaScript:changeImg()"> <img src="image/img0.jpg" name="img" border="0"></a>

  • マウスオーバーで画像変更で

    以下のような方法で画像変換を行っています。 <script language="JavaScript"> function imageChange(imageName,imageURL){ document.images[imageName].src = imageURL; } </script> <TR><TD><IMG SRC="./img/01.gif" NAME="image01" style="position:absolute;top:20;left:10;" onMouseOver="imageChange('image01','sub01_01b');"> </TD></TR> <IMG SRC="./img/01_01b.gif" name="sub01_01b"> 実際にマウスオーバーさせると×印が出てしまいます。 onMouseOver="this.src='./img/01_01b.gif'" とするとできるのですが。 どこかに間違いがあるのだと思うのですが、自分で発見できません（＞＜） 間違いを訂正してください！

  • javascriptを使って画像を切り替える

    javascriptを使って画像（id="chengeImg"）を切り替えたいと思っています。 画像はsamp0.jpg～samp4.jpgの計5枚 ただ、問題があって、 画像によって移り替わる時間を変えたいんです。（一定ではない） setTimeoutの引数(time)と画像を、どう結びつければよいのかが 分からず困っています。 それぞれ、 画像0の時は5000ミリ秒　 画像1の時は4000ミリ秒 画像2の時は3000ミリ秒　… と移り変わる速度を変えたいのです。 一応、timeは配列がいいのかと配列にしてみました それが良いのかどうかも定かではないのですが… どのようにすれば、時間が一定でない画像切り替えが可能になるでしょうか？ スクリプトを詳しく教えていただけると、ありがたいです。 以下、javascriptの一部を記します。 【js】ファイル(imagechange.js)------ window.onload=anime; var img=new Array(5); img[0]=new Image(); img[1]=new Image(); img[2]=new Image(); img[3]=new Image(); img[4]=new Image(); img[0].src="samp0.jpg"; img[1].src="samp1.jpg"; img[2].src="samp2.jpg"; img[3].src="samp3.jpg"; img[4].src="samp4.jpg"; //画像枚数 var num=0; //時間制御 time = new Array(5000, 4000, 3000, 3000, 3000); function anime(){ 　var ch = document.getElementById("changeImg"); 　ch.src=img[num].src; 　 if(num<4){ 　 　 num++; 　 }else{ 　　 num=0; 　 } 　 setTimeout("anime()",time); } 【html】ファイル-------- <head> <title>画像切り替え</title> <script type="text/javascript" src="imagechange.js"</script> </head> <body> <p><img src="samp0.jpg" width="700" height="200" id="chengeImg"></p> </body> </html> 以上となります。 詳しい方、ぜひ教えてくださいませ。 どうぞ宜しくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する