一定時間画像を表示させ、別のURLに自動的にリンクさせる方法とは？
- 質問者は、一定時間画像を表示させ、その時間が経過すると別のURLに自動的にリンクさせる方法について教えてほしいと質問しています。
- 具体的なソースコードが提供されており、現在のコードでは14時台にT3.jpgを表示させ、それ以外の時間帯にはリンク先のURL（anime.html）に切り替えるような処理を行っていることがわかります。
- また、リンク先のanime.htmlでは8枚の画像を10数秒ごとに切り替えながら表示するアニメーションを実装していることが記述されています。
- ベストアンサー
一定時間画像を表示させ、その時間が経過すると別のU
すみません。教えてください。（色々調べたのですが？） (1)ＰＭ14：00～14：59まで、T3．jpgをHPの画面に表示します。 (2)15：00からは、別のURLに自動的にリンクさせ表示させますと考えております 以下がソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 12.0.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <title>youbi</title> <!--<meta http-equiv=content-type content="text/html;charset=euc-jp">--> <SCRIPT Language="JavaScript"> <!-- Date = new Date(); Time = Date.getHours(); myIMG="T3.jpg"; if(Time==14){ document.write("<center><img src='"+myIMG+"'></center>"); } else { ⇒ここの記述がわかりませんので宜しくお願い致します リンク先のURL（anime.html)は、８枚の画像ファイルを10数秒毎に表示させたいと考えております } </script></HEAD> 参考までにリンク先のHTMLのソースです（仮称＝anime.htmlです） 【参考】 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 12.0.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <title>youbi</title> <!--<meta http-equiv=content-type content="text/html;charset=euc-jp">--> <SCRIPT Language="JavaScript"> <!-- m=8; ８枚の画像を10数秒毎に切り替えそれをPC電源断まで 継続表示させます？？ var j=1; var imags = new Array(); var cnt = 0 ; for(i=0 ; i<m ; i++){ imags[i] = 'T'+(j+i)+'.JPG'; } function anime(){ document.banner.src = imags[cnt++] ; if( cnt== m ) { cnt = 0 ; } } //--> </script> </HEAD> <BODY bgcolor="#fffcff"> <A href="anime.html"> <img src="T1.jpg" border="0" width="100%" name="banner" onload="setTimeout('anime()',12000)"> </A> </BODY> </HTML>
- 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>
関連するQ&A
- これは何を意味しますか？
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY> <img src="./image/2151.jpg"> </BODY> </HTML>
- ベストアンサー
- HTML
- ページ内の画像だけを一定時間毎に自動更新させたい
ネットワークカメラを使って、留守中の犬をモニターしています。 FTPサーバーに10秒ごとに静止画のJPGファイル（同名）が転送 されるように設定しています。 これをサイト内で公開したいと思っており、出来れば画像のみを 10秒ごとに自動更新で表示されると良いなと思っております。 ページ全体をリロードさせてしまうと、鬱陶しいことになりますので、 画像だけリフレッシュさせたいのですが、うまくいきません。 過去の質問（http://okwave.jp/qa1104885.html）を拝見し、 Iframe内に埋め込んだのですが、更新されません。 また、良回答の書き方でもうまくできませんでした・・・。 キャッシュを残させないようにもしたのですが。 この書き方では間違っていますでしょうか。 ------------- ■iframe.html ------------- <HTML> <HEAD> <META http-equiv="refresh" content="10"> </HEAD> <BODY> <img src="http://×××.××.jpg"> </body> </HTML> ------------- ■index.html ------------- <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=x-sjis"> </HEAD> <BODY> <iframe src="http://×××.××.jpg"> </iframe><br> </body> </HTML> また、別の方法でスムーズに画像だけを更新させる方法がございましたら 教えていただけないでしょうか。よろしくお願いします。
- ベストアンサー
- HTML
- 画像のランダム表示
初心者です。。 画像のランダム表示で、下のものを使っているのですが、 画像の上にカーソルをもっていったときに手のマークにしたいのですが、 どのようにすればできるのでしょうか？ onclickを使っているからだと思うのですが、 A href=を使えばできるのでしょうか？ よろしくお願いします。 <script type="text/javascript"> <!-- var imgs = new Array; var n = 5; var i; for(i=0;i<n;i++){ imgs[i] = new Image(); } imgs[0].src="image/001.jpg"; imgs[1].src="image/002.jpg"; imgs[2].src="image/003.jpg"; imgs[3].src="image/004.jpg"; imgs[4].src="image/005.jpg"; function disp(img){ img.src=imgs[Math.round(Math.random()*(n-1))].src; } //--> </script> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> </head> <body> <div align="center"> <img src="image/001.jpg" border="0" onclick="disp(this)"> </div> </body> </html>
- ベストアンサー
- JavaScript
- 新ウィンドウの画像をクリックして閉じる
画像を載せたホームページを作成しています。 target="_blank"で新ウィンドウで開いた画像をクリックして、新ウィンドウを閉じるにはどうしたら良いのでしょうか？ これじゃダメなんでしょうか？ <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <SCRIPT LANGUAGE="JavaScript"> <!-- function WinCls(){ window.close() } //--> </SCRIPT> <TITLE></TITLE> </HEAD> <BODY> <A href="aaa.jpg" javascript:WinCls()" target="_blank"><IMG src="aaa.jpg"></A> </BODY> </HTML>
- 締切済み
- JavaScript
- javespriptについて
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="css/top.css"> <title>地球船地球丸プロジェクト</title> <script type="text/javascript"> <!-- for(var i=1;i<=1000,i++){ document.writeln(i+"回目:桑立") } --> </script> </head> <body> </body> </html> と <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="css/top.css"> <title>地球船地球丸プロジェクト</title> <script type="text/javascript"> <!-- var ra-men =10; if(ra-men> =60){ alert("合格"); } else{ alert("不合格"); } --> </script> </head> <body> </body> </html> うまくいきません 間違っているのでしょうか
- ベストアンサー
- ブラウザ
- ホームページのヘッダ部分について
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML LANG="JA"> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=Shift_JIS"> <META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="text/css"> <META HTTP-EQUIV="CONTENT-SCRIPT-TYPE" CONTENT="text/javascript"> <TITLE>○○○○</TITLE> <LINK REL="STYLESHEET" TYPE="text/css" HREF="css1.css"> <meta name="keywords" content="△,△,△,△,,△,△,"> <meta name="description" content="●●●●●"> </HEAD> <BODY> … となっているのですが、無駄な部分はありますか？ 順番などは合ってますか？ また、こうしたほうがいい、などとアドバイスがあればぜひよろしくお願いいたします。
- 締切済み
- レンタルサーバ・ASP
- ファイヤーフォックスでCSSが読み込まれません
会社のホームページを担当していて困っています。 ＩＥでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか？ よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>
- 締切済み
- ネットトラブル
- ファイヤーフォックスでCSSが機能しません
会社のホームページを担当していて困っています。 ＩＥでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか？ よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>
- 締切済み
- ネットトラブル
- 背景に指定したイメージ以外の余白を見せないようにする方法は？
こんにちは！まさにタイトル通りの質問です。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <META NAME=""> <META NAME=""> <META NAME=""> <META NAME=""> <META http-equiv="refresh" content="5;url=test.html"> <SCRIPT LANGUAGE="JavaScript"> <!-- function resizeWindow(){ window.resizeTo(720,580); } //--> </SCRIPT> <title>test</title> <style type="text/css"><!-- body { background-repeat:no-repeat;} --></style> </HEAD> <body onLoad="resizeWindow()" background="top4.jpg" width=720 height=580 > </body> </HTML> としていますが、窓を大きくしたりすると右や下に余白が見えてかっこわるいです。どうすれば改善しますか？ お願いします☆
- ベストアンサー
- HTML
- IEでエラー
FireFoxだと問題ないのですが、IEだとエラーが出ます。 原因がわからないので、助けてください。 IEには次のようなエラーが出ます。 ライン：5 文字：1 エラー：構文エラーです コード：0 ソースコードは以下の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> 。。。。 以上、すみませんが、よろしくお願いします。
- ベストアンサー
- HTML
お礼
ありがとうございました。早速ご教示頂いたソースで動作いたしました。 私は、当年53歳ですが、Javaになると手が出ません。CGIもです。 過去の遺物になりますが、一応某手企業で携帯電話の開発をしておりました。 「電源が入っていないか、電波の--」は私の傑作です。 自慢話はさておいて、質問した経緯をお話いたします。 (1)TVを活用し、社内に同時に情報提供が出来ないかが最初でした。 検討した結果、私に席にもう1台PCを置き、5担当並列に情報共有できるようにPCを設置 貴方にとっては簡単かも知れませんが、マーキータグで5担当のTVに情報発信しておりました。 (2)その後、一方通行の発信ではなく、双方向＝担当でもEDITできるように作成いたしました。 (3)やはり、担当の方は面倒くさがり形骸化してきました。 (4)そこで、一定周期同じ情報を提示するのではなく、5担当いますので、その担当の誰がいまどこに いて作業しているかが、判ればよいと思ったのです。 （A担当のBさんは今○○にいるから、電話してお願いすれば、稼動の削減になります。 運用はまだですが、今まではBさんがいるのにあえて別な人を派遣していたのです。