ベストアンサー

画像のフェードイン・フェードアウト

2010/01/29 16:28

現在のホームページですが、サムネイル画像をオンマウスすれば拡大部分の画像が切替わるようになっています。画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン・フェードアウトで切替わるようにしたいと思っています。下記は、現在のファイルです。（あまり関係ないと思う部分は省いてます）回答の方、宜しくお願い致します。  <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'>  </script>  <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head>  <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div>  </div>  <div class="work-bottom">  <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a>  </div>  </div> </div> </div>

jyowa
お礼率13% (8/61)

JavaScript
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

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

ベストアンサー

yyr446
ベストアンサー率65% (870/1330)

2010/02/02 20:09 回答No.3

No.2です。ということで、いつぞやのタイトルくるくるのサンプルを基に、フェードインフェードアウトをオブジェクト指向もどき(？)で作ってみた。 fadeinクラス、fadeoutクラスを拡張すれば、もっときめ細かく調整出来て、汎用性がたかまるかも... 参考にならなかったら無視してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>FadeIn/FadeOut</title> <script type="text/javascript" charset="utf-8">  </script> </head> <body> <div> <image id="target" src="image/yahagi.png" style="width:0px;height:0px;"> </div> <button onclick="fadein_s();">フェードイン</button> <button onclick="fadeout_s();">フェードアウト</button> </body> </html>

その他の回答 (2)

yyr446
ベストアンサー率65% (870/1330)

2010/02/02 17:02 回答No.2

フェードイン・フェードアウト効果としては、javascriptでスタイル属性の値を連続的に変化させるのが普通だと思います。・表示領域のwidhtとheigthを0から目的のサイズまで変更すれば、ググーと大きくなる視覚効果が得られます。フェードアウトはそれを逆にします。・あるいは、opacityを0％（透明）から100％（不透明）まで、連続的に変化させれば、じわーと出てくる視覚効果が得られます。フェードアウトはそれを逆にします。 opacityの指定はCSS2だとブラウザーによって方言があります。（例）opacityを50％の指定 element.style.filter = 'alpha(opacity=50)';　//IE element.style.MozOpacity = 0.5;　//FireFox element.style.opacity = 0.5; //CSS3 サポート