- 締切済み
javascript画像の切り替えについて
javascriptでの画像切り替えについて、どなたか教えていただけますでしょうか？ やりたいことは、ユニクロの商品ページのカラー選択のような、↓↓ http://store.uniqlo.com/jp/CSaGoods/472513 サムネイルにマウスオーバーするとメイン画像が切り替わり、 マウスアウトすると、一番最初の画像に戻り、 クリックすると、選択した画像が固定されてメイン画像に表示される、 という動きです。 実際に下のようなソースを作ったのですが、 マウスオーバーとマウスアウトはきちんと動作しても、 クリックしたときに画像が固定されなくて困っています。 どなたか教えて頂けませんでしょうか？ よろしくお願いいたします。 ------------------------------------------- <div id="item_main"> <img src="メイン画像のURL" alt="" name="main" /></div> <div id="item_sum"> <p> <img src="サムネイルのURL1" width="24" height="24" onMouseOver="document.main.src='メイン部分に表示させたい画像のURL1;" onMouseOut="document.main.src='メイン画像のURL';" onClick="document.main.src='メイン部分に表示させたい画像のURL1';" /> <img src="サムネイルのURL2" width="24" height="24" onMouseOver="document.main.src='メイン部分に表示させたい画像のURL2;" onMouseOut="document.main.src='メイン画像のURL';" onClick="document.main.src='メイン部分に表示させたい画像のURL1';" /> <img src="サムネイルのURL3" width="24" height="24" onMouseOver="document.main.src='メイン部分に表示させたい画像のURL3;" onMouseOut="document.main.src='メイン画像のURL';" onClick="document.main.src='メイン部分に表示させたい画像のURL1';" /> </p> </div> </div> ----------------------------------------------------
- saho0201
- お礼率33% (3/9)
- JavaScript
- 回答数6
- ありがとう数0
- みんなの回答 （6）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
#5です。 前回、番号を間違えて書いてしまいました。 #1、2 → #2、3 #3様 → #4様 が正しいです。 ついでに、#5の回答にいらないものがくっついていたので一部訂正を。 （不要な一行を削除してあります↓） var handler = function(evt){ var elm = evt./*@if(1)srcElement@else@*/target/*@end@*/; if(nodeTest(elm)){ if(evt.type == "click") mouseClick(elm); else mouseOut(); } else { elm = evt./*@if(1)toElement@else@*/relatedTarget/*@end@*/; if(elm && nodeTest(elm)) mouseOn(elm); } }
- fujillin
- ベストアンサー率61% (1594/2576)
＃1、2です。 なんとなく、サムネイルの画像と拡大表示する画像は別物なのかと思っていたのですが… 同じ画像でよければ、#3様の回答がよろしいかと。 別画像の場合の例 （画像のbackground-imageに拡大表示用の画像を指定しておくことにしています） （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- body { padding:5px; } #thumbnail, #thumbnail li { list-style:none; margin:0; padding:0; } #thumbnail li { float:left; margin:3px; } #thumbnail li img { width:24px; height:24px; } //--> </style> </head> <body> <div> <img id="main_image" src="A.jpg" alt=""> </div> <ul id="thumbnail"> <li><img src="thumb1.jpg" alt="thumb1" style="background-image:url('A.jpg')"></li> <li><img src="thumb2.jpg" alt="thumb2" style="background-image:url('B.jpg')"></li> <li><img src="thumb3.jpg" alt="thumb3" style="background-image:url('C.jpg')"></li> </ul> <script type="text/javascript"> <!-- (function(m_id, t_id){ var element = document.getElementById(m_id); if(!element || element.nodeName != "IMG") element = null; var uri = element? element.src:null; var getURI = function(node){ return node.style.backgroundImage.match(/^url\(["'](.+)["']\)$/)[1]; } var nodeTest = function(node){ if(node.nodeName != "IMG") return false; while(node && node.id != t_id) node = node.parentNode; return node; } var show = function(u){ if(element) element.src = u; }; var mouseOn = function(node){ show(getURI(node)); }; var mouseOut = function(){ show(uri); }; var mouseClick = function(node){ var u = getURI(node); if(u) uri = u; } /*@cc_on@*/ var handler = function(evt){ var elm = evt./*@if(1)srcElement@else@*/target/*@end@*/; if(nodeTest(elm)){ if(nodeTest(elm)) if(evt.type == "click") mouseClick(elm); else mouseOut(); } else { elm = evt./*@if(1)toElement@else@*/relatedTarget/*@end@*/; if(elm && nodeTest(elm)) mouseOn(elm); } } document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'mouseout', handler, false); document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', handler, false); })("main_image", "thumbnail"); //--> </script> </body> </html>
- mikemike7
- ベストアンサー率87% (97/111)
簡単に書いてみました。 //JavaScript部 <script type="text/javascript"><!-- var defImg = ""; function onImage(image){ if(defImg == ""){ defImg = document.main.src; } document.main.src=image; } function outImage(){ document.main.src=defImg; } function defultImage(image){ defImg = image; } --></script> // HTML部 <div id="item_main"> <img src="a.png" alt="" name="main" /> </div> <div id="item_sum"> <p> <img src="a_sum.png" width="24" height="24" onMouseOver="onImage(this.src);" onMouseOut="outImage();" onClick="defultImage(this.src);" /> <img src="b_sum.png" width="24" height="24" onMouseOver="onImage(this.src);" onMouseOut="outImage();" onClick="defultImage(this.src);" /> <img src="c_sum.png" width="24" height="24" onMouseOver="onImage(this.src);" onMouseOut="outImage();" onClick="defultImage(this.src);" /> </p> </div> サムネイル用の画像は、srcだけ指定すればOKで、 onMouseOver、onMouseOut、onClick内の記述は統一しています。
- fujillin
- ベストアンサー率61% (1594/2576)
#2です。 ＞クリックしていない状態だとマウスアウトが機能して、 ＞クリックした状態だとマウスアウトが機能しない、 ＞のようなことができるのかな、と思ったのですが。。。 ＞やはり難しいのでしょうか。 そんなことはありません。実現可能です。 ただ、ご提示のような記述方法だと難しいでしょうという意味です。 マウスオーバーの時の画像は、要素に対して決まっているので一律の処理でも良いのですが、メインの画像は変わっていくので、マウスアウトした時の画像は一定ではありません。 それなので、その画像（のurl）をどこかに記録しておいて、そこを参照しながらマウスアウトした時に表示する画像を決めてあげるような処理が必要となります。 画像のURLはスクリプト内に記録しておいても良いですし、一旦、HTML（DOM)に記録しておくような仕組みでも可能です。 つまり、 マウスオン時： 要素によって決まっている画像を表示 マウスアウト時： その時に表示する画像（可変）を記録場所を参照して表示 クリック時： クリックした要素で決まる画像を表示し、 その画像を記録場所に記録する（これで可変となる） といった処理をすれば実現できると思います。 残念ながら、今、時間がとれませんので、どなたかがサンプルを作成してくださることを期待しましょう。
- fujillin
- ベストアンサー率61% (1594/2576)
補足を見て。 ＞クリックしたときに画像が固定されなくて困っています ご自分が指定している動作を順に追ってみればわかると思います。 例えば、3番目のサムネイルをクリックする場合 1）クリックする前にmouseoverが発生して、c.pngが表示される。 2）クリックすると、c.pngが表示される。（＝見た目には変わらない） 3）マウスを離すと、mouseoutが発生して、a.pngが表示される という順にイベントが発生します。 最初のご質問文のような動作をしたいということであれば、マウスアウト時に表示する画像が変化するはずなので、補足にご提示のような記述方法（表示画像が固定されている）ではそもそも無理のような気がしますが？
画像いっぱい用意してまで確認する気は無いのでとりあえず気づいた点。 「item_sum」は何の合計？ onmouseoverの最後のシングルクォートが無い onmouseoutが全部「メイン画像のURL」 onclickが全部「メイン部分に表示させたい画像のURL1」
補足
失礼いたしました。 コードをわかりやすく直しました。 <div id="item_main"> <img src="a.png" alt="" name="main" /> </div> <div id="item_sum"> <p> <img src="a_sum.png" width="24" height="24" onMouseOver="document.main.src='a.png';" onMouseOut="document.main.src='a.png';" onClick="document.main.src='a.png';" /> <img src="b_sum.png" width="24" height="24" onMouseOver="document.main.src='b.png';" onMouseOut="document.main.src='a.png';" onClick="document.main.src='b.png';" /> <img src="c_sum.png" width="24" height="24" onMouseOver="document.main.src='c.png';" onMouseOut="document.main.src='a.png';" onClick="document.main.src='c.png';" /> </p> </div> ------------------------------------------- ＞＞「item_sum」は何の合計？ divに付けたID名なので、特に意味はありません。 ＞＞onmouseoverの最後のシングルクォートが無い 失礼いたしました。書き損じです。 ＞＞onmouseoutが全部「メイン画像のURL」 マウスアウトした時は、すべて同じ画像をメイン部分に表示させたいとおもっています。 ＞＞onclickが全部「メイン部分に表示させたい画像のURL1」 失礼いたしました。書き損じです。 いかがでしょうか？ 何か原因などわかりますでしょうか？
補足
回答ありがとうございます。 ＞＞最初のご質問文のような動作をしたいということであれば、 ＞＞マウスアウト時に表示する画像が変化するはずなので、 ＞＞補足にご提示のような記述方法（表示画像が固定されている）では ＞＞そもそも無理のような気がしますが？ クリックしていない状態だとマウスアウトが機能して、 クリックした状態だとマウスアウトが機能しない、 のようなことができるのかな、と思ったのですが。。。 やはり難しいのでしょうか。 ユニクロのサイトだと希望する動きができているのですが、 これはjavascriptではなく、他の仕組みを使って実現しているということでしょうかね？ ありがとうございます。もう少し調べてみます。