- ベストアンサー
複数のリンク画像を一定時間で（各リンク先も）切り替えるには？
画像表示を一定時間で切り替え、同時にそれぞれの画像に別のリンク先を指定したいのです。JavaScriptかスタイルシート、その両方の組み合わせなどの応用になるのではないかと思うのですが、なるべくシンプルな方法をご存知の方、よろしくお願いいたします。
- nozawa5
- お礼率100% (5/5)
- JavaScript
- 回答数2
- ありがとう数6
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<html> <head> <script type="text/javascript"> window.onload = function(){ var num = 1; setInterval(function(){ document.getElementById('link' + num).style.display = 'none'; num = document.getElementById('link' + (num+1))? ++num : 1; document.getElementById('link' + num).style.display = 'block'; },5000); } </script> <style type="text/css"> .banner { display:none; } </style> </head> <body> <div id="link1"> ここにリンク＆画像の普通のタグ1 </div> <div id="link2" class="banner"> ここにリンク＆画像の普通のタグ2 </div> <div id="link3" class="banner"> ここにリンク＆画像の普通のタグ3 </div> <div id="link4" class="banner"> ここにリンク＆画像の普通のタグ4 </div> <div id="link5" class="banner"> ここにリンク＆画像の普通のタグ5 </div> </body> </html> 色んな方法ありますがHTMLさえ書ければリストの記述ミスが無い方法ならこれかな？ 各 画像リンクは、それぞれをDIVで囲んで link1～ (link + 連続した数値)のIDを付ける。 1個目以外は classやstyle=""で初期非表示にしておく。(サンプルの通り) あとは勝手に順番に表示して最後まで行くとループします。 5000の所が秒数 5000=5秒。 1ページに1個で考えてるサンプルなのでsetInterval()を使っています。 複数使う場合はsetTimeout()を使った方が良いので、わからなければ補足で。 広告バナーなどの自動表示切替 と同じ事ですから、 ネット上に結構サンプルもあるんじゃないかと思います。
その他の回答 (1)
img0からurlの数だけの画像を用意 画像のURLに数字が含まれると× シンプル(?)とはこういう意味？^^; <html> <body> <img id="a" src="img0.jpg" onClick="jp()"> <script> url=['http://www.google.co.jp/','http://www.yahoo.co.jp/','http://www']; n=0; window.onload=function(){setInterval("ch()",5000)} function jp(){location.href=url[$('a').src.replace(/\D/g,'')];} function ch(){n++;n*=(n<(url.length));$('a').src=$('a').src.replace(/\d/,n);} function $(o){return document.getElementById(o);} </script> </body> </html>
お礼
参考にさせていただきました。ありがとうございます。
関連するQ&A
- リンク画像をランダム表示して一定時間でランダムにリンク画像切り替えするには？
「複数のリンク画像を一定時間で（各リンク先も）切り替えるには？」で画像表示を一定時間で切り替えることがわかりましたが、ページを開いたときにリンク画像がランダムで表示されその後、一定時間でランダムにリンク画像を切り替えをする場合、どうすればいいのでしょうか？よろしくお願いします。
- ベストアンサー
- JavaScript
- 決まった曜日で一定時間だけ表示画像を切替えたい
ホームページ内の一部で、 曜日指定で一定時間だけ表示画像を切替えたいのですが、 日付指定で変わるものばかりしか検索で見つけられずに困っております。 具体的には「毎週火曜日10：00～11：00」までは、自動でＡ画像を表示し それ以外はＢ画像を表示するようにしたいです。 現在は下記（日付指定で画像を変更）をなんとか変更すればできるかと思い 設置して動作させてみました。 ですが、私はJavaScriptに関して初心者なので 曜日指定と、再び元の画像表示に戻すのに どうしていいのか分かりませんでした。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - window.onload = changeDisplay; function changeDisplay(){ var objDate = new Date(); var now = objDate.getTime();//現在のタイムスタンプ（ミリ秒）を取得 var changeTime = new Date("Jan 1, 2011 00:00:00");//切り替える日時のタイムスタンプ（ミリ秒）を取得 //切り替え前 if (now < changeTime) { document.getElementById('hoge').style.display = "block"; document.getElementById('hoge2').style.display = "none"; setTimeout("changeDisplay()", 1000);//1秒ごとに実行（◯秒ごとの場合は、第2引数に 「◯ * 1000」 と記述） //切り替え後 } else { document.getElementById('hoge').style.display = "none"; document.getElementById('hoge2').style.display = "block"; } } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 参考サイト http://blog.aidream.jp/javascript/javascript-timed-display-change-402.html これを、どう変更すればよいのでしょうか？ またあるいは、別によい記述方法はあるのでしょうか？ 下記の過去の質問も拝見してみましたが、 参考サイトのリンク先もなくなっていたりして、分かりませんでした。。。 「曜日と時間を指定して表示画像を切り替える」 http://okwave.jp/qa/q1832822.html すみませんが、よろしくお願いいたします！
- ベストアンサー
- JavaScript
- 一定時に画像を変え、その画像にリンクを貼るというスクリプトを改造したいのですが
こんにちわ。javascriptはほとんどわかりません。既成のものをHTMLにうめこんだり、スクリプトのHTMLタグ部分を変えたりできる程度です。 今回やりたいのは、数分後に画像を変え、その画像にリンクを貼るというものですが、サンプルであったjavascriptは別ウインドウにリンクを出すというものです。これを別ウインドウではなく、そのままのページにリンク先を表示させるには、どう変えたら良いでしょうか？ http://bunjin.com/java/chang_banner2.html こちらのjavascriptです。 先述したように、初心者です。理論で教えていただいてもわからないので、できれば具体的に教えていただけると大変助かります。あつかましくて申し訳ありませんが、どなたかお助け下さい。よろしくお願いします。
- ベストアンサー
- JavaScript
- 一定時間で画像とリンク先を変換する
DreamWeaverCS3でHPを製作しております、まだ初心者です。 リンクが設定してある画像を一定時間で変換していき、なおかつリンク先のページをポップアップウィンドウで開こうとしています。 下記コードでポップアップウィンドウは開くのですが一定時間での変換がうまくいきません。 どなたかご教授頂けませんでしょうか。 宜しくお願い致します。 <SCRIPT language="JavaScript"> <!-- var interval = 5000; //切り替わる時間（1000=1秒） jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "00000.html"; img[0] = "00000.jpg"; jmp[1] = "11111.html"; img[1] = "11111.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' onClick=\"javascript:window.open('"+jmp[n]+"','','width=400,height=380'); return false;\">"); document.write("<img src='"+img[n]+"' border='0' width='300' height='25' />"); document.write("</a>"); setInterval(function(){ //--> </SCRIPT>
- ベストアンサー
- JavaScript
- 一定時間で変わる画像・・・
javaScriptで一定時間で画像を更新するのを作ったのですが、ＨＰを表示する時「セキュリティ保護のため・・・」という情報バーが出てきます。 広告画像などで一定時間で画像が変わるものもＨＰにあるのですが、その場合は情報バーは出ません。 何故でしょう？ javaScriptで作った場合は絶対にこの情報バーが出てしますのですか？
- 締切済み
- JavaScript
- マウスを置くと画像が変わり、そこにリンクも張れるような
マウスをおくと大きさの違う画像に変えれて、そこにリンクも張れるようなのってどうやればいいですか？ html、スタイルシート、JavaScript辺りでやりたいのですが わかる方教えてもらえませんか？ やはり、フラッシュ使うしかないですか？
- 締切済み
- HTML
- リンク先の画像が消されてる
ブログとかツイッターで画像のリンクをクリックすると、リンク先のページで、例えば「ＦＣ２ブログ、404Error、 ご指定のファイルが見つかりませんでした」と表示されることがよくあります。 これの原因としては、 ・アップロードした人が画像を削除した ・表示できる期間が非常に短い とかでしょうか？ 最新のブログや、２ちゃんで比較的最近貼られた画像リンクをクリックしても、削除されていることが多いので、いつも不思議に思っていました。なぜリンク先の画像がほとんどないのでしょうか？
- ベストアンサー
- その他（インターネット・Webサービス）
- JavaScriptでリンクの背景にある画像をOnMouseOver時
JavaScriptでリンクの背景にある画像をOnMouseOver時に変更する方法がわからなくて困っています。 webページを作っているのですが、OKWaveのサイトの上のタブのように画像を背景とするリンク上にマーカーが来たときにその画像の下部50％を表示するようにしたいのですがうまくいきません。 マーカーがリンク上に無い時には画像の上部50％を表示するようなものにしたいと思っています。 スタイルシートでリンクに指定したidなどで処理したいと思っています。 説明が下手かと思いますが、サンプルコード等を教えてください。
- ベストアンサー
- JavaScript
- エクセルで、ハイパーリンクのリンク先をグラフシートに指定したい
WindowsXP(home)上でexcel2002を使用しております。 標記のように、ハイパーリンクで別ブックの グラフシートを参照させたいのですが、やり方が 分かりません。 普通のワークシート上のセルをリンク先に指定する 事はできるのですが、グラフシートにはできなくて 困っております。 １．リンク先に直接グラフシートを指定する。 ２．グラフシート上にダミーのオブジェクトを つくり、これをリンク先に指定することで グラフを表示させる。 １，２どちらかでも結構ですので、ご存知の方 いらっしゃいましたらお願いいたします。 （最悪、ワークシート上にグラフをはめ込んで 同じシートのセルを参照させることで、 グラフを表示することも考えられますが、 できればこれは避けたいと考えております。） よろしくお願いします。
- ベストアンサー
- オフィス系ソフト
- 時間ごとにリンク先を変更させたい
こんばんは。 JavaScriptを使って時間ごとにリンク先を変更させたいと思ってます。 変更する時間は、 8：00～24：00は、a.htmlへ 24：00～8：00は、b.htmlへ 毎月第2金曜日17：30～21：00は、b.htmlへ です。 ソースなど探してみましたが、時間のみの指定だけで、 曜日の指定方法などがわかりません。 ご存知の方がおりましたらソースを教えていただけると幸いです。 宜しくお願い致します。
- 締切済み
- JavaScript
お礼
うまくいきました。外部ファイルとして、読み込む形にしようと思っていたので、使わせていただきたいと思います。ありがとうございました。