- ベストアンサー
リンクをマウスオーバーでフェードイン・アウトができる方法
- リンクをマウスオーバーした時に、画像と文字をフェードイン・アウトさせる方法がわかりません。ソースコードを書いたが、画像と文字が最初にだけフェードインし、リンクをマウスオーバーした時には別の画像と文字に切り替わるだけです。
- リンクをマウスオーバーした時にも画像と文字をフェードイン・アウトさせるためには、どのように変更すればいいのでしょうか？試行錯誤しましたが解決できませんでした。
- リンクをマウスオーバーした時に画像と文字をフェードイン・アウトさせる方法について教えてください。ソースコードを書いたが、最初にだけフェードインし、リンクをマウスオーバーした時には別の画像と文字に切り替わるだけです。どのように変更すればいいのでしょうか？
- mitan3354
- お礼率54% (6/11)
- JavaScript
- 回答数2
- ありがとう数14
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
今日で６月も終わるので、サンプルを載せときます。 ※jQueryの機能で実装してます。（jQuery使わなくてもできますが） ※全角空白は半角空白にしてください。 <script type="text/javascript" charset="utf-8" src="/jslib/jquery-1.4.2.min.js"></script> <script type="text/javascript"> <!-- $(function(){ $('div.target').fadeIn("slow"); $('div.navi a').hover( function(){ if($(this).text()=="hoge1"){ $('#foo').attr('src','img/2.png'); $('#foo').attr('alt','サーファーの画像'); $('#buntate').text('サーファー'); } if($(this).text()=="hoge2"){ $('#foo').attr('src','img/3.png'); $('#foo').attr('alt','海の画像'); $('#buntate').text('海'); } $('div.target').fadeOut("slow"); $('div.target').fadeIn("slow"); }, function(){ $('#foo').attr('src','img/1.png'); $('#foo').attr('alt','元の画像'); $('#buntate').text('眺める'); }); }); // --> </script> <body> <div class="target" style="display:none;"> <img src="img/1.png" id="foo" alt="元の画像"> <br> <span id="buntate">眺める</span> </div> <div class="navi"> <a href="javascript:void(0)">hoge1</a> <a href="javascript:void(0)">hoge2</a> </div> </body>
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
何か新しい知識（jQuery）と古い知識（IE独自）が混ざって調べられたような．．． jQuery使うなら、まずjQueryの基本的な事をおさえましょう。 http://semooh.jp/jquery/ それより、HTML、CSS、JAVASCRIPTも基本は押えてね。 下のサイトは内容が少し古くなってるけど、初心者の基礎学習向けです。 http://www.tohoho-web.com/html/index.htm http://www.tohoho-web.com/css/index.htm http://www.tohoho-web.com/js/index.htm
お礼
ご回答、ありがとうございます。 今のままでは使える感じではないのですね。 IE独自とありましたが、そうなんですか・・・。もっと勉強してみます。
お礼
凄い！期待通りに動きました！ 先にご指摘にあったように、基礎からの勉強もしなければ、と思っていますが、 ずっと悩んでいたので、本当にうれしいです！ このようなコードが、自分でも作れるようになりたいと思います。 本当にありがとうございます！！！