- 締切済み
こんにちは。
こんにちは。 Webを勉強し始めて2ヵ月の初心者です。 自分のホームページのトップにjavascriptを使った スライドショーを置こうと奮闘しております。 下記のページのjavascriptを参考に作ったのですが、 各画像に他のページへのリンクを付けたいのです。 どなたかお教え下さいませんでしょうか。 何卒宜しくおねがいします。 （参考サイト)http://bunjin.com/java/slide_show.html
- studio_kix
- お礼率33% (1/3)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
No2です ＞（D.jpg）が先に表示されてから1枚目（A.jpg）がフェードインします。 参考で揚げられているサイトが、そのような仕様なので、同じようにしてみました。 応急処置でよければ… 1）A.jpgをHTMLの一番最後に記述する。 →これだと、A.jpgは最初にフェードインせずに、B.jpgが重なってきますが… （参考サイトも同様ですよね？） 2）CSSでwrapperにサイズを指定しておいて、a要素はdisplay:noneに設定しておく （最初は画像がないところにフェードインするようになる） →ご希望に近くなるかと思いますが、スクリプトオフのユーザだと何も表示されない。 参考サイトでは最初に1.jpgを表示している上に、1jpgがフェードインされる（同じなのでわからない）ようになっているので、見た目は最初の表示時間が少し長くなっていますが、HTML内のimgのsrcを5.jpgなどとしてみれば、まったく同じになることがわかるでしょう。 見た目を同じようにしたければ、上記の1）の方法でA.jpgが表示されるようにしておいて、最初にfader();で呼び出しているところを時間差を持たせるために、setTimeout(fader, 1500);のようにすることで表示時間が長くなるので、参考サイトとほぼ同じようにできます。 ちゃんと、やるなら書き直しかな？ 参考サイトやNo1様の回答のように、HTMLソースには最初に表示するものだけを書いておいて、残りの画像を配列で持っておく方法と、No2の例のようにHTMLに表示する画像を先に書いておく方法が考えられます。 画像の数を変えたり内容を変えたりするときに、HTMLを書き換えるかjavascriptを書き換えるかの違いが出ます。 また、フェードインする時も、 ・下の画像に重ねてフェードインするだけ（参考サイト、No2のサンプル） ・画像がフェードアウトしてから次の画像がフェードインする ・フェードインしながらスライドインするような複合型 のような方法が考えられますし、最初に表示しておくものをどうするか（デフォルトの画像とか何も表示しないとか）によっても処理が変わってきますね。 もともとがfilter.blendTransはないだろう（No1様ご指摘のようにIEでしか効果ない）ということで、どのようなものにしたいのかは不明でしたが、サンプルとして参考サイトと雰囲気が似たものをつくってみただけです。 ついでに、別方法の参考にという意味で、HTMLに画像を全て書いておく方法（多分この方が画像の変更などをし易いのではないかと）を提示させていただいた次第です。
- fujillin
- ベストアンサー率61% (1594/2576)
filter.blendTrans ってのはいただけないので、 若干方法は違いますが、似たようなものの例を… HTMLのdiv内に記載されているものが、順次表示されます。 （スクリプトオフの場合は、最後のものが表示されるのみ） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> div#wrapper { position:relative; } div#wrapper a { display:block; position:absolute; } div#wrapper a img { border:0; width:500px; height:200px; } </style> </head> <body> <div id="wrapper"> <a href="http://www.yahoo.co.jp/"><img src="A.jpg" alt="A"></a> <a href="http://www.google.co.jp/"><img src="B.jpg" alt="B"></a> <a href="http://www.goo.ne.jp/"><img src="C.jpg" alt="C"></a> <a href="http://www.rakuten.co.jp/"><img src="D.jpg" alt="D"></a> </div> <script type="text/javascript"> <!-- var fader = function() { var interval = 8; // 画像表示間隔（sec） var img = document.getElementById("wrapper").getElementsByTagName("a")[0]; img.style.display = "none"; img.parentNode.appendChild(img); img = img.getElementsByTagName("img")[0]; fader.fadeIn(img); setTimeout(arguments.callee, interval * 1000); } //@cc_on fader.fadeIn = function(e) { var op = 0; (function() { op += 2, op = op>100?100:op; e.style./*@if(1) filter = "alpha(opacity=" + op + ")" @else@*/opacity = op / 100 /*@end@*/; e.parentNode.style.display = "block"; if (op<100) setTimeout(arguments.callee, 50); })(); } fader(); //--> </script> </body> </html>
- yyr446
- ベストアンサー率65% (870/1330)
各画像に他のページへのリンクを付けたいのです。 （参考サイト）のをそのまま使いたいのであれば、 画像に対応する順番で、 var link = new Array(); link[0] = 'link1.html';link[1] = 'link2.html';link[2] = 'link3.html'; link[3] = 'link4.html';link[4] = 'link5.html'; を加えます。 そして、 document.images.SlideShow.src = pre_load[j].src; の下に document.images.SlideShow.onclick=(function(index){ return function(){location.href=link[j];}})(j); を加えれば、とりあえず出来ます。 <script langage="JavaScript">から察するに、かなり古いDHTMLのサンプルですね。 filter.blendTrans いつまでサポートされ続ける事やら．．． ちなみにIE以外ではフェード効果は出ません。画像切り替わりだけです。
お礼
返答、遅くなりまして申し訳ありません。 早速、指示通り修正したところ、 みごと各画像にリンクがつきました。 ご回答、本当にありがとうございました。
補足
返答、遅くなりまして申し訳ありません。 ご回答ありがとうございました。 早速、参考にさせて頂きました。 試してみたのですが、ページＯＰＥＮ時に最後の画像（D.jpg）が先に表示されてから1枚目（A.jpg）がフェードインします。 何とか1枚目（A.jpg）から表示させようと本を見ながらいじってみたものの、うまくいきません。 解決方法がありましたらお教えいただけますでしょうか。 何卒、よろしくお願いします。