- ベストアンサー
画像のフェードインについて
- サムネイル画像をクリックすると、フェードインで拡大画像が表示されるようにしたいと思っています。
- 現在のホームページでは、オンマウスすると画像が切替わる仕組みになっています。
- フェードインを実装するために、画像の表示を徐々に明るくするエフェクトを追加する必要があります。
- jyowa
- お礼率13% (8/61)
- その他([技術者向] コンピューター)
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ひまだったのでつくってみました。ご参考に。 <html> <head> <title>test</title> <style type="text/css"><!-- div.images-layer {position: absolute;left: 20px;top: 10px;} --></style> <script language="JavaScript"> <!-- function fadein( xno ) { document.images['img' + xno].filters['alpha'].opacity = duty ; if ( duty == 100 ) return ; duty += 20 ; if ( duty >= 100 ) duty = 100 ; setTimeout("fadein("+xno+")",100); } function allclear() { for(i=0;i<3;i++) document.images['img'+i].filters['alpha'].opacity = 0; duty = 0 ; } //--> </script> </head> <body> <div class="images-layer"><img src=00.jpg name=img0 style="filter:alpha(opacity=0);" width=100 height=100></div> <div class="images-layer"><img src=01.jpg name=img1 style="filter:alpha(opacity=0);" width=100 height=100></div> <div class="images-layer"><img src=02.jpg name=img2 style="filter:alpha(opacity=0);" width=100 height=100></div> <br><br><br><!-- 適当な調整 --><br><br><br><br> <a href=# onmouseover="allclear();fadein(0)"><img src=00.jpg width=30 height=30></a> <a href=# onmouseover="allclear();fadein(1)"><img src=01.jpg width=30 height=30></a> <a href=# onmouseover="allclear();fadein(2)"><img src=02.jpg width=30 height=30></a> <br> </body> </html>
その他の回答 (1)
- YEND77
- ベストアンサー率56% (21/37)
下のファイルがあったほうが答えられる人の数がふえると思います。 ../js/layer.js ../css/original.css
お礼
回答ありがとうございます。 補足にご指摘のあった部分を書き込んでます。
補足
遅くなって申し訳ありません！ ../js/layer.js が下記です。 //--表示属性set(表示) function showLAYER(layName){ if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用 document.getElementById(layName).style.visibility='visible' else if(document.all) //e4用 document.all(layName).style.visibility='visible' else if(document.layers) //n4用 document.layers[layName].visibility='show' } //--表示属性set(非表示) function hideLAYER(layName){ if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用 document.getElementById(layName).style.visibility='hidden' else if(document.all) //e4用 document.all(layName).style.visibility='hidden' else if(document.layers) //n4用 document.layers[layName].visibility='hide' } ../css/original.cssが下記です。 div.top { height: 285px; width: 100%; margin: 0em auto; background: #000000; padding-top: 70px; padding-bottom: 70px; } div.infomation { text-align: right; width: 980px; margin: 0.5em auto 0em; } div.infomation div { font-size: 92%; } div.infomation div.title { color: #333333; font-weight: bold; font-family: Helvetica, Arial, sans-serif; } div.process { border: 1px solid #737373; } div.process-title { background: #737373; font-weight: normal; color: #FFFFFF; text-indent: 1em; width: 50%; } div.process p { width: 65%; margin-left: 34%; margin-right: 1%; } div.arrow { text-align: right; padding-right: 10px; } div.work-list { margin: 5em auto 0px; width: 600px; height: 160px; } div.work-list div { float: left; width: 200px; } div.work-list span { display: block; padding-top: 3px; } div.work-shosai { width: 820px; margin: 3em auto 0em; position: relative; } div.work-right { float: right; width: 200px; text-align: right; border: 1px solid #CCCCCC; height: 400px; margin-bottom: 1em; display: inline; margin-right: 5px; } div.work-right div { margin: 5px; border-bottom: 1px dotted #CCCCCC; padding-bottom: 3px; } div.work-right div.title { border-bottom: 1px solid #CCCCCC; font-size: 114%; color: #A10200; } div.work-left { float: left; } div.images-layer { position: absolute; left: 0px; top: 0px; visibility: hidden; } div.work-bottom { margin: 0em auto 2em; width: 820px; text-align: left; clear: both; } div.work-bottom img { margin: 0px 10px 5px 0px; } div.work-bottom img.r-margin-none { margin-right: 0px; } 宜しくお願い致します。
お礼
回答ありがとうございます。 回答いただいたソースを現在私のソースに書き換えればいいのでしょうか？ また、どこからどこを書き換えればいいのでしょうか？ 素人なもので、初歩的なことでしょうが宜しくお願いします。