- 締切済み
画像のフェードインについて・・・。
以前にも質問させていただいたのですが、解決に至らなかったので、再度質問させていただきました。 現在のホームページですが、サムネイル画像(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終了 -->
- jyowa
- お礼率13% (8/61)
- JavaScript
- 回答数4
- ありがとう数17
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
#2、#3です。 もとのままで、layer.js だけを入れ替える例。 var param = {}, speed = 50, step = 4; window.onload = function() { var i=0, e, n, d = document.getElementsByTagName('DIV'); while (e = d[i++]) { if (e.className=='images-layer') { if (e.id) { param[e.id] = { interval:null, opacity:0 }; setOpacity(e, 0); e.style.visibility = 'visible'; } } } } //--FadeIn(表示) function showLAYER(nam) { fade(nam, step); } //--FadeOut(非表示) function hideLAYER(nam) { fade(nam, -step); } //Fade効果 function fade(nam, dir) { var o = param[nam].opacity; if (param[nam].interval) clearInterval(param[nam].interval); param[nam].interval = setInterval( (function(nam, dir){ return function() { var o = param[nam].opacity; o += dir; if (o<0) o = 0; else if (o>100) o = 100; param[nam].opacity = o; setOpacity(document.getElementById(nam), o); if (o == 0 || o == 100) { clearInterval(param[nam].interval); param[nam].interval = null; } };})(nam, dir), speed); } function setOpacity(e, o) { e.style.filter = 'alpha(opacity=' + o + ')'; e.style.opacity = o / 100; } もとの構成のままやっているので、フェードインには若干の時間がかかるため、サムネイルの上でカーソルを走らせると全体の画像が透けて、デフォルトの画像がにじんで見える現象がおこる。(#3の場合はそのようはならない）
- fujillin
- ベストアンサー率61% (1594/2576)
#2です。 スクリプトでe4用とかn4用とか場合分けされていますが、それだけ古いブラウザだとフェードインできないのでは？（未検証） なんやかや修正しているうちに、結局、ほとんどHTMLから書き直してしまいました。（ご提示のものを解読するのが面倒というのもありますが…） HTMLの構成はご提示のものに近い形にしてありますが、idなどは振りなおしています。 全体の構成が不明なので、CSSは違っているかも知れません。調整してください。 拡大画像とサムネイルで画像名に規則性があれば、「<div id="images_layer">～</div>」も不要なのですが、とりあえずは残してあります。 サムネイルと表示用の画像（images_layer）は順に対応させておいてください。 で、こんな感じでどうでしょうか？ （フェードインの速度は、speedとstepで調整可能） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <style type="text/css"> div#screen { position.relative; } div#screen img { position:absolute; } div#screen, div#screen img { width:600px; height:400px; } div#images_layer { display:none; } div#thumbnail img { width:45px; height:45px; margin: 0px 10px 5px 0px; } </style> <script type="text/javascript"> <!-- function sample(evt) { var speed = 50, step = 4;//フェードイン速度、変化率 var Tid = []; var t = evt.target || evt.srcElement; if (t.nodeName != 'IMG') return; var i, thumbs = get('thumbnail'), imgs = get('images_layer'); for (i=0; i<thumbs.length; i++) if (thumbs[i] == t) break; if (!imgs[i]) return; var e = imgs[i].cloneNode(false); setOpacity(e, 0); document.getElementById('screen').appendChild(e); Tid[Tid.length] = setInterval(fadeIn(e), speed); function fadeIn(e) { var o = 0; return function() { o = o>100-step?100:o+step; setOpacity(e, o); if (o == 100) { clearInterval(Tid.shift()); e = document.getElementById('screen'); e.removeChild(e.firstChild); } } } function setOpacity(e, o) { e.style./*@cc_on @if(@_jscript) filter = 'alpha(opacity=' + o + ')' @else*/ opacity = o / 100 /*@end @*/; } function get(id) { return document.getElementById(id).getElementsByTagName('IMG'); } } //--> </script> </head> <body> <div id="screen"><img src="A.jpg" alt="画像説明"></div> <div id="images_layer"> <img src="A.jpg" alt="画像説明"> <img src="B.jpg" alt="画像説明"> <img src="C.jpg" alt="画像説明"> <img src="D.jpg" alt="画像説明"> </div> <div id="thumbnail" onmouseover="sample(event)"> <img src="A_small.jpg" alt="画像説明"> <img src="B_small.jpg" alt="画像説明"> <img src="C_small.jpg" alt="画像説明"> <img src="D_small.jpg" alt="画像説明"> </div> </body> </html> ----------------------------------------------- どうしても現状のままやりたい場合は、layer.js の内容をそっくり入れ替えることで可能と思いますが、ちょいと面倒そう… （現状は表示/非表示をvisibilityで行なっているので、初期設定からvisibilityの制御をopacityに変更するようにする必要がある）
- fujillin
- ベストアンサー率61% (1594/2576)
＞どこかを、ちょこちょこっと書き換えれば希望通りな状態 ＞になると思ってました 多分、その程度で可能だと思うけれど… 書き換える元が「秘密」状態なので、ちょこちょこの部分を提示できない。 スーパー想像力を駆使して回答すると、 showLAYER()で divを element.style.display = 'block'とかしているところを setTimeoutやsetIntervalを利用して filter/opacity（=透明度）を透明から不透明に変化させるようにしてあげればよいのでは？ これが「ちょこちょこ」なのか「ちょこちょこちょこ」なのかは元のスクリプトにもよるので不明。
- yyr446
- ベストアンサー率65% (870/1330)
以前にも回答した者です。他の場所でも質問されているみたいですが、 それらの回答は、「一般的にこうすればよい」「こうやって作ればよい」的 な回答で、あなたのページに具体的にどのように適用するのかの回答を 作るのは不可能です。 それは、あなたが肝心な部分を提示してないからです。 例えば、 <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> の定義内容はどうなっているのか？、他にも影響するCSSがあるのか？ <script type="text/javascript" src="../js/layer.js"></script> のjavascriptの素性は？、何のためにあるのか、このライブラリー を使っている部分はどこ？ 等、等．．． そういった事がわからないので、改造例じゃなく、代替案しか でないのです。
お礼
すみません・・・。 どこかを、ちょこちょこっと書き換えれば希望通りな状態になると思ってました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
補足
遅くなって申し訳ありません・・・。 下記の部分がわかってもダメでしょうか？ ../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; }