- ベストアンサー
画像をフェードインしながら切り替えたい方法
- フェードインしながら画像を切り替える方法についてアドバイスをお願いします。
- 現在の実装コードとしては、マウスオーバー時に画像を切り替えていますが、即座に切り替わってしまいます。フェードインしながら切り替える方法を教えてください。
- リンク先のコードを使用して、画像をフェードインしながら切り替える方法についてアドバイスをいただきたいです。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
HTML5の<canvas>を使おうと、思ったけどIEだとcanvasでopacity操作 出来ないし、<td>の中に<canvas>入れてよいのやら調べるの後にして とりあえず、jQueryを使って安直に... <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4");</script> <script type="text/javascript"> $(function(){ $(".thumbnail").mouseover(function(){ $("#myPIC").hide(); $("#myPIC").attr("src",$(this).parent().get(0).href); $("#myPIC").fadeIn("slow"); }); $(".thumbnail").click(function(){ return false; }); }); </script> <body> <table bgcolor="#000000" width="800" align="center" border="2"> <tr align="center"> <td width="150" align="center"> <!-- 商品サブ画像 --> <a href="画像リンク1"><img src="画像1" width="130" class="thumbnail"></a> <a href="画像リンク2"><img src="画像2" width="130" class="thumbnail"></a> <a href="画像リンク3"><img src="画像3" width="130" class="thumbnail"></a> <a href="画像リンク4"><img src="画像4" width="130" class="thumbnail"></a> </td> <!-- 商品メイン画像 --> <td width="650"><BR> <img id="myPIC" src="最初に表示される大きい画像" style=" margin:10px 25px 30px 25px;"> </td> </tr></table> </body>
その他の回答 (1)
- azkurw
- ベストアンサー率33% (41/124)
補足
すいません。知識不足でご紹介頂いたサイトがを見てもどれをどの部分に入れればいいのか分かりません。宜しければもう少し詳しくアドバイス頂けませんか？宜しくお願いします。