- 締切済み
画像のフェードインについて・・・。
以前にも質問させていただいたのですが、解決に至らなかったので、再度質問させていただきました。 現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。(あまり関係ないと思う部分は省いてます) こういうことに関してはまったくの素人です・・・。 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <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> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <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> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->
- みんなの回答 (4)
- 専門家の回答
関連するQ&A
- 黒だけが印字されないため、ノズルクリーニングを行いましたが、クリーニング後にインク残量が0になってしまいます。
- ノズルクリーニングをした後、インクが完全に空になる問題が発生しています。
- テストプリント後にノズルクリーニングをした結果、インク残量が0になってしまうトラブルが続いています。
補足
遅くなって申し訳ありません・・・。 下記の部分がわかってもダメでしょうか? ../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; }