- ベストアンサー
jQueryマウスオーバーでDiv要素の画像とテキストを切り替える方法
- jQueryを使用して、サムネイルにマウスを乗せると別のDiv内に大きい画像とtitle属性のテキストを表示させる方法について説明します。
- 表示される画像がサムネイル時の大きさに縮小されてしまう問題と、元画像の大きさで表示させる方法について解決策を探しています。
- また、フェードイン・アウトで画像を切り替える方法についても教えてください。
- yama_no_uchi
- お礼率75% (6/8)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
条件がいまいちよくわかりませんが、単純にこんなのでは？ （全角空白は半角に） <!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"> <!-- #contents img { width:50px; height:50px; cursor:pointer; } //--> </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1");</script> <script type="text/javascript"> <!-- $(function(){ $("#contents img").mouseover(function(){ var img = $(this); $("#photo img:first-child").fadeOut(500, function(){ $(this).attr("src", img.attr("src")).fadeIn(1000).next("span").html(img.attr("title")); }); }); }); //--> </script> </head> <body> <ul id="contents"> <li><img src="A.jpg" title="ああああああ" alt=""></li> <li><img src="B.jpg" title="いいいいいい" alt=""></li> <li><img src="C.jpg" title="うううううう" alt=""></li> </ul> <div id="photo"> <img src="A.jpg" alt="big_image"> <span>テキストテキスト</span> </div> </body> </html> 「cursor:pointer」はフェイクっぽいのでやめた方が良さそう。
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
#1です。 ＞最初に表示していた画像の縦横の比率のまま、全ての画像が ＞表示される症状に悩んでおります。 サムネイルのサイズを取得しても、サムネイルのサイズが返されます。（当然ですが） どのようなHTML構成なのか不明ですが、適当に設定して（前回と異なります）書いてみるなら、 こんな感じでしょうか？（外側のdivを画像がはみ出すことは無いと仮定しています） （全角空白は半角に） <!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"> <!-- #contents img { width:50px; height:50px; } #photo { width:600px; height:600px; text-align:center; background-color:#ccc; } //--> </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1");</script> <script type="text/javascript"> <!-- $(function(){ $("#contents img").mouseover(function(){ var img = $(this); var photo = $("#photo img:first-child"); photo.fadeOut(500, function(){ photo.attr("src", img.attr("src")).fadeIn(1000).parent().next("span").html(img.attr("title")); }); photo.css("marginTop", (photo.parent().height() - photo.height())/2|0); }); }); //--> </script> </head> <body> <ul id="contents"> <li><img src="A.jpg" title="ああああああ" alt=""></li> <li><img src="B.jpg" title="いいいいいい" alt=""></li> <li><img src="C.jpg" title="うううううう" alt=""></li> </ul> <div> <div id="photo"> <img src="A.jpg" alt="big_image"> </div> <span>テキストテキスト</span> </div> </body> </html>
お礼
ご回答ありがとうございます。お教え頂いたコードで上下左右中央に比率を保ちながら表示することが出来ました！ お手数をお掛けしてすみませんでした。 本当にありがとうございました！
お礼
ご回答ありがとうございます。お教え頂いたコードで上下左右中央に比率を保ちながら表示することが出来ました！ お手数をお掛けしてすみませんでした。 本当にありがとうございました！
補足
早々にご回答頂きありがとうございます！ お教え頂いたコードでフェードイン・アウトでの画像切替が出来ました！ ただ、画像の上下左右の中央表示についてなのですが、お教え頂いたコードに上下左右中央に表示させるためのスクリプトを追記したところ中央に表示させることはできたのですが、最初に表示していた画像の縦横の比率のまま、全ての画像が表示される症状に悩んでおります。 Div要素「#photo」は正方形のボックス状にしており、縦長・横長の画像問わずDivの中央に画像を表示したいと考えているのですが、マウスを乗せるたびにその画像のサイズを取得して中央に表示することはできるのでしょうか？ 重ね重ね恐れ入りますが、差支えなければご教授頂ければ幸いです。 $(function(){ $("#contents img").mouseover(function(){ var img = $(this); $("#photo img:first-child").fadeOut(500, function(){ $(this).attr("src", img.attr("src")).fadeIn(1000).next("span").html(img.attr("title")); ////追記した部分//// var w = $('#photo img').width(); var h = $('#photo img').height(); 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"}); ////追記ここまで//// }); }); });