• 締切済み

こんにちは。

こんにちは。 Webを勉強し始めて2ヵ月の初心者です。 自分のホームページのトップにjavascriptを使った スライドショーを置こうと奮闘しております。 下記のページのjavascriptを参考に作ったのですが、 各画像に他のページへのリンクを付けたいのです。 どなたかお教え下さいませんでしょうか。 何卒宜しくおねがいします。 （参考サイト)http://bunjin.com/java/slide_show.html

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

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)
回答No.2

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>

studio_kix
質問者

補足

返答、遅くなりまして申し訳ありません。 ご回答ありがとうございました。 早速、参考にさせて頂きました。 試してみたのですが、ページＯＰＥＮ時に最後の画像（D.jpg）が先に表示されてから1枚目（A.jpg）がフェードインします。 何とか1枚目（A.jpg）から表示させようと本を見ながらいじってみたものの、うまくいきません。 解決方法がありましたらお教えいただけますでしょうか。 何卒、よろしくお願いします。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

各画像に他のページへのリンクを付けたいのです。 （参考サイト）のをそのまま使いたいのであれば、 画像に対応する順番で、 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以外ではフェード効果は出ません。画像切り替わりだけです。

studio_kix
質問者

お礼

返答、遅くなりまして申し訳ありません。 早速、指示通り修正したところ、 みごと各画像にリンクがつきました。 ご回答、本当にありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • Flashを使わず動きのあるかっこいいトップページを作成したい

    自社ホームページのトップページ作成を任されているのですが かっこいいトップページになりません。 Flashを使わずにjavascriptで以下の様なトップページ作成を試みています。 http://www.kagetu.com/ 今の所、jquery.cross-slide.jsのajax?を使って画面がスライドするページは できたのですが、スライドが止まって文字が浮かび上がってまた別の画像が スライドするといったような複雑な動きができません。 どなたかここで掲載したようなホームページをjavascriptとかを使って （Flashを使わず無料のツールで）作成する 方法をご存知の方いらっしゃいましたらご教授ください。 ※コードも載せていただけると助かります。

  • 一定時に画像を変え、その画像にリンクを貼るというスクリプトを改造したいのですが

    こんにちわ。javascriptはほとんどわかりません。既成のものをHTMLにうめこんだり、スクリプトのHTMLタグ部分を変えたりできる程度です。 今回やりたいのは、数分後に画像を変え、その画像にリンクを貼るというものですが、サンプルであったjavascriptは別ウインドウにリンクを出すというものです。これを別ウインドウではなく、そのままのページにリンク先を表示させるには、どう変えたら良いでしょうか？ http://bunjin.com/java/chang_banner2.html こちらのjavascriptです。 先述したように、初心者です。理論で教えていただいてもわからないので、できれば具体的に教えていただけると大変助かります。あつかましくて申し訳ありませんが、どなたかお助け下さい。よろしくお願いします。

  • フェードスライドショーを設置したい

    JavaScript 初心者。 既存のホームページにスライドショーを設置したく勉強中です。 希望するスライドショートしては 　・既存のページの中に設置。 　・ページを開けば自動で始まり（開始等ボタンなしで）ループする。 　・画像の切り替えがゆったりしたもの。 まずは設置してみようとサンプル等探した中 下記が希望したものに一番近く自分のホームページでも動かせたのですが http://miyakekobo.fc2web.com/photo_parts/cp_01.html フェードスライドショーに編集できますか？ 　もし出来るなら、よろしければソースを教えていただけますか。 記述していただけるなら 許す限りの解説もしていただければありがたいのですが・・・ あつかましいお願いですがよろしくご教授ください。

  • HTMLとCSSの次に覚えることは何でしょうか?

    現在、Webサイトを作成するための勉強をしております。 次のサイトを参考にし、HTMLとCSSの役割や違いを知ることはできました。 http://homepage.shichihuku.com/003.html そこで、次へのレベルアップのためには、何を覚えていったらよいのでしょうか？ どんなWebサイトにするかによって、覚えるべきことは異なるのかもしれませんが、まず初心者が覚えていくのに良いものがあれば、教えて下さい。 ちなみに、これから作ろうとしているWebサイトのトップページには、写真のスライドショー（3枚くらい）を掲載したいと思っております。これは無料のFlash作成ソフトでも可能でしょうか？ また、問い合わせフォームを作りたいのですが、これはPHPで作るのでしょうか？それともジャバスクリプトで作るのでしょうか？ どのような回答でも、私にとっては参考になりますので、ご回答をして頂けるとありがたいです！！

    • ベストアンサー
    • CSS
  • サイトでオープニングでスライドショーを使いたい。

    こんにちは。 サイトのトップページで４，５枚の画像をスライドショーで表示させ、 スライドショーをフェードアウトで終了後に通常のトップ画面がフェードインして表示させることを、 FlashかjQueryで動作させるにはどうしたらいいのでしょうか？ トップページは遷移してページを表示させるのではなく同ページ内で実行させたいです。 参考にしたいwebサイトとしてこちらのhttp://www.boku-seka.com/ 映画公式サイト「僕たちは世界を変えることが出来ない。」のように 出来ればなと考えています。 どうか詳しくご存知の方教えていただけないでしょうか。 よろしくお願いします。

    • 締切済み
    • CSS
  • スクロールしてページトップへ

    「ページトップへ」のようなリンクがあって、クリックするとスクロールしてページトップでゆっくり止まるような（参考：http://www.endoritsuco.com/disc.html、http://www.mienai.com/about_orthodontics/index.html等）javacsriptを探しています。 javascriptは初心者なので、どこかでスクリプトを配布してたりすると嬉しいのですが。 書籍でも構いませんので情報をいただければと思います。

  • VOGUE.COMのトップページのようなjavascriptによるスラ

    VOGUE.COMのトップページのようなjavascriptによるスライショーを作りたいのですが、 javascriptがあまり詳しくないのでどう作ったらよいか分かりません。 目的は 5枚のバナー（740×300）をオート再生でスライドショーにしたいのですが、 VOGUE.COMのように、下のバーのボタンを押すとふわっと消え他のバナーに飛んだり、一時停止のようにしたいです。 もちろんバナーを押すとリンク先に移動（これは普通にリンクを入れるだけだと思うので大丈夫です） さらに言うと、順番はページにアクセスする度にランダムにしたいです。 また、この画像は比較的最初の方へ、この画像は比較的後ろの方へ、と確率調整もできるのであれば尚良いです（これはできればで良いです） デザインは、VOGUEのようにしたいと思ってます。下は赤ではなく黒系のバーですが。 このバーは画像の上に載ってますよね？同じにように透けたバーを載せたにしたいです。 このように作るにはどうしたら良いでしょうか？ 宜しくお願い致します。

  • Javascriptを使用したスライドバナーについて教えてください

    現在ECサイトを構築しておりまして、TOPページの一定の場所の中で画像が自動でスライド、もしくはフェードイン・アウトで切り替わるバナーを設置したいと思っています。 似たようなイメージのものを設置しているサイトさんのソースを覗いたりしているのですがJavascriptについて詳しくはないので導入や設定の方法が見出せず困っております。 各画像にはそれぞれ別のリンク先を設定したいのですが何か参考になるサイトや方法などございませんでしょうか？ 自動や手動で画像が切り替わるスライドショーなどは多数見つけたのですが、リンクの設定などに触れているものが見つからなかったのでこちらに投稿させていただきました。 あくまでもFLASHではなくJavascriptで行いたいので宜しくお願いいたします。

  • ＦＣ２で画像の差し換えについて　

    ＦＣ２でブログを書き始めました。テンプレートを借りているのですがトップの画像をこちらで（http://www.slide.com/main/emsu）編集したスライドショーに差し替えたいです。編集の方法に基づいて、サイズの変更をしてアップロードしてＣＳＳを変更したのですが画像の部分だけ真っ白です。どなたかわかる方教えて下さい。お願いします。ブログ初心者でトンチンカンな質問でしたら失礼しました。

  • 画像のスライドショーのJavaスクリプトで・・

    上記のようにJavaスクリプトで組んだ画像のスライドショー処理をホームページのTOPページ上下二箇所設置しようと考えていますがユーザー的に閲覧処理は重たいでしょうか？ 画像の容量は1ファイル２０KB程度です。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する