- ベストアンサー
一定時間画像を表示させ、別のURLに自動的にリンクさせる方法とは？
- 質問者は、一定時間画像を表示させ、その時間が経過すると別のURLに自動的にリンクさせる方法について教えてほしいと質問しています。
- 具体的なソースコードが提供されており、現在のコードでは14時台にT3.jpgを表示させ、それ以外の時間帯にはリンク先のURL（anime.html）に切り替えるような処理を行っていることがわかります。
- また、リンク先のanime.htmlでは8枚の画像を10数秒ごとに切り替えながら表示するアニメーションを実装していることが記述されています。
- maimimu_001
- お礼率33% (3/9)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
なんか、よく理解できてないかも知れませんが… ・0時～15時まではT3.jpgを固定表示 ・15時～24時はＴ1～Ｔ8.ｊｐｇを切替えて表示 という様に理解すると、ＨＴＭＬは一つでもよさそうに思えます。 それとも、他にいろいろ表示しているものが（ご質問では省略なさった）あって、別ファイルということなのかな… とりあえず、勝手に、一つのHTMLファイルで済ませてしまおうという案。 （切替え表示中に午前0時を回ると、再度固定表示に戻るはず） （おなじく、全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- window.onload = function(n){ var changeoverHour = 15; // 機能切替え時刻（固定表示/切替え表示） var changeInterval = 12; // 画像切替え間隔（秒） var numMax = 8; // 切替え画像番号の最大値 var d = new Date(); var interval, func = arguments.callee, num = 3, next = 0; d = (d.getHours()*60 + d.getMinutes()) * 60 + d.getSeconds(); interval = changeoverHour*60*60 - d; if(0>=interval){ num = ("number"==typeof n)?n:0 num = (num % numMax) + 1; next = num; interval = changeInterval; } document.getElementById("banner").src = "T" + num + ".jpg"; setTimeout( function(){ func(next); }, interval*1000); } //--> </script> </head> <body> <p> <img src="T3.jpg" width="100%" id="banner" alt="changing image"> </p> </body> </html>
その他の回答 (1)
- babu_baboo
- ベストアンサー率51% (268/525)
きっと、「そのじかんになったら・・・」というとおもうけど。 ぜんかくくうはくは、はんかくにしてね <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <style> #MYIMG { text-align: center; } </style> </head> <body> <div id="MYIMG"> <script> if (14 < (new Date).getHours()) location.href = 'anime.html'; else document.write ('<img src="T3.jpg" alt="T3">'); </script> </div> ############ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>anime.html</title> <style> body { background : #fcf; } #hoge { width : 100%; } </style> </head> <body> <div id="MYIMG"> <img id="hoge" src="T0.jpg" alt=""> </div> <script> var anime = (function () { var m = 8; var j = 1; var c = 0; var e = document.getElementById ('hoge'); return function () { e.src = 'T' + (j + (++c % m)) + '.jpg'; }; })(); setInterval (anime, 12000); </script>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
ありがとうございました。早速ご教示頂いたソースで動作いたしました。 私は、当年53歳ですが、Javaになると手が出ません。CGIもです。 過去の遺物になりますが、一応某手企業で携帯電話の開発をしておりました。 「電源が入っていないか、電波の--」は私の傑作です。 自慢話はさておいて、質問した経緯をお話いたします。 (1)TVを活用し、社内に同時に情報提供が出来ないかが最初でした。 検討した結果、私に席にもう1台PCを置き、5担当並列に情報共有できるようにPCを設置 貴方にとっては簡単かも知れませんが、マーキータグで5担当のTVに情報発信しておりました。 (2)その後、一方通行の発信ではなく、双方向＝担当でもEDITできるように作成いたしました。 (3)やはり、担当の方は面倒くさがり形骸化してきました。 (4)そこで、一定周期同じ情報を提示するのではなく、5担当いますので、その担当の誰がいまどこに いて作業しているかが、判ればよいと思ったのです。 （A担当のBさんは今○○にいるから、電話してお願いすれば、稼動の削減になります。 運用はまだですが、今まではBさんがいるのにあえて別な人を派遣していたのです。