HPの背景で朝、昼、晩とその雰囲気の背景画像に自動変更したいのですが
そのようなスクリプトをご存知のかた、またはサイトを教えて欲しいのです
が・・・よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

 下記の「インサイドウェブ」のJavaScriptのコーナーに、ご希望のスクリプトのヒントとなるものが置いてあります。



 他にもたくさんのサンプルが置いてあるので、一度ご覧になってみてはいかがですか?

注)ここに置いてある全てのサンプルは、ご自分のHPにインサイドウェブへのリンクを貼るだけで、無料で利用可能だということです。

参考URL:http://www.inside.ne.jp/
    • good
    • 0

とりあえず手っ取り早い方法。


<HTML>
<HEAD>
<title></title>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
date = new Date()
hour = date.getHours()
image_path = 'cgi-bin/image';
morning_image = "ohayo.gif"
daytime_image = "konchiwa.gif"
night_image = "konbanwa.gif"

if (hour >= 6 && hour < 11) {
bg_image = morning_image
} else if (hour >= 11 && hour < 17) {
bg_image = daytime_image
} else {
bg_image = night_image
}
document.write("<BODY background=" + image_path + '/' + bg_image + ">");
//-->
</SCRIPT>
あああ
</BODY></HTML>

document.bgColor = ...で代入しようとするとハマります。
(画像は背景色とは事情が違う)まあここは手っ取り早くBODYタグを
直接書き出してしまいましょう。

image_pathのところや、morning_imageのところを適切に変えてください。
(画像ファイルがこのHTMLファイルと同じディレクトリにあるなら
document.write("<BODY background=" + bg_image + ">");
でいいでしょう)

なお、hour >= 6 などのところが時間に応じて処理を分岐させている所です。
お好きな時間帯になるよう調整してください。
    • good
    • 0
この回答へのお礼

Head_Syndicate様
さっそくのご解答ありがとうございます。
試してみます。
貴殿のますますのご活躍をお祈りいたします。
重ねてありがとうございます。

お礼日時:2001/05/16 09:03

CLUBとむやん君というサイトさんでサンプルプログラムを配布していらっしゃいますよ。



トップ⇒Javascript講座⇒背景

アクセスする時間ごとに背景を変えられるサンプルもあります。
ページ自体に説明書きのようなものはないのですが、ダウンロードしたサンプルの中に入っているHTMLを見れば全部詳しく解説しています。それでもわからない場合は質問掲示板があるのでそこで質問してみると良いと思います。
参考URLにアドレス入れておきますね。

頑張ってください。

参考URL:http://www2s.biglobe.ne.jp/~club_tom/
    • good
    • 0
この回答へのお礼

sonata様
早目のご解答ありがとうございます。
挑戦してみます。
貴殿のますますのご活躍をお祈りいたします。
重ねてありがとうございます。

お礼日時:2001/05/16 09:02

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QHTML罫線の行にmouseoverで行全体の背景色を変えるスクリプト

罫線の行<tr>~</tr>に、マウスが乗ると
ハイライトされるような仕組みのサンプルプログラム使い、
具体的には、こうして、highlight.htcを呼び出しています。
<tr style='behavior:url(highlight.htc);'>

◆質問◆
ところが、↓のようにすると、
(1) Aにカーソルを乗せる⇒A、Bにハイライト
(2) Bにカーソルを乗せる⇒Bだけにハイライト
(3) Cにカーソルを乗せる⇒Cだけにハイライト
となりますが、(1)のケースでもBだけにハイライトを当てる
(=セルAにだけは常にハイライトをあてない)
ようにするのはどうしたらよいでしょうか。

よろしくお願い致します。

<table>
<tr style='behavior:url(highlight.htc);'>
<td rowspan="2"></td>
<td></td>
</tr>
<tr style='behavior:url(highlight.htc);'>
<td></td>
</tr>
</table>

┏━┳━┓
┃ ┃B┃
┃A┣━┫
┃ ┃C┃
┗━┻━┛

-----------------------------highlight.htc

<script type="text/javascript">
<!--
attachEvent("onmouseover", detailTr_onmouseover);
attachEvent("onmouseout", detailTr_onmouseout);
function detailTr_onmouseover() {
this.style.backgroundColor='#000000';
}
function detailTr_onmouseout() {
this.style.backgroundColor='transparent';
}
-->
</script>

------------------------------

罫線の行<tr>~</tr>に、マウスが乗ると
ハイライトされるような仕組みのサンプルプログラム使い、
具体的には、こうして、highlight.htcを呼び出しています。
<tr style='behavior:url(highlight.htc);'>

◆質問◆
ところが、↓のようにすると、
(1) Aにカーソルを乗せる⇒A、Bにハイライト
(2) Bにカーソルを乗せる⇒Bだけにハイライト
(3) Cにカーソルを乗せる⇒Cだけにハイライト
となりますが、(1)のケースでもBだけにハイライトを当てる
(=セルAにだけは常にハイライトをあてない)
よう...続きを読む

Aベストアンサー

<body>
<table>
<tr style='behavior:url(highlight.htc);'>
<td rowspan="2" style="background-color:#FFFFFF">A</td>
<td>B</td>
</tr>
<tr style='behavior:url(highlight.htc);'>
<td>C</td>
</tr>
</table>
</body>
</html>

QDOMを使った、スクリプトを自分で組み立てたときまたは、ソース掲載サイ

DOMを使った、スクリプトを自分で組み立てたときまたは、ソース掲載サイトのスクリプトを、変数名やfunction名を変えて実行すると、document.getElementById("obj") is null という風になり、全くできません。
(objにはid名が入ります。)
なぜでしょうか。

Aベストアンサー

おそらく、ドキュメントを読みこむ前に実行しているのでは?

<script type="text/javascript">
// エラー
var obj = document.getElementById("hoge");
</script>
<body>
<div id="hoge"></div>
</body>

よってwindow.onloadを利用する事になります。

window.onload = function() {
 var obj = document.getElement...
}

が、onloadはひとつしか関数を割り当てられません。
よって最近では以下のようonloadイベントに関連付ける関数を指定するのが妥当でしょう。

function func() {
 var obj = document.getElement...
}

if (window.addEventListener) {
 // Firefox, Safari, その他もろもろ
 window.addEventListener("load", func, false);
} else if (window.attachEvent) {
 // IEのみ
 window.attachEvent("onload", func);
} else {
 // 念のため
 window.onload = func;
}

上記のようにブラウザ毎に処理を変える必要がありますので、個人的にはDOM操作やAjaxをするのであれば、prototype.jsやjQueryなどのクロスブラウザなライブラリを利用するのを強く推奨します。

おそらく、ドキュメントを読みこむ前に実行しているのでは?

<script type="text/javascript">
// エラー
var obj = document.getElementById("hoge");
</script>
<body>
<div id="hoge"></div>
</body>

よってwindow.onloadを利用する事になります。

window.onload = function() {
 var obj = document.getElement...
}

が、onloadはひとつしか関数を割り当てられません。
よって最近では以下のようonloadイベントに関連付ける関数を指定するのが妥当でしょう。

function func() {
 v...続きを読む

Qスクリプト内から他の外部スクリプトを読み込みたい

Java Script初級者です。
外部スクリプト内から他の外部スクリプトを読み込むことは可能ですか?

実現したい内容はスクリプト内の関数から▼下のような感じで外部ファイルを読み込むことです。
function check(fm) {
<script language="JavaScript" src="AAA.js"></script>
}

何か良い方法がありましたらぜひ教えてください。

Aベストアンサー

え~と、細切れに書いたことをまとめますと
以下のようになります。
これで、動くはず・・・・・

<html>

<head>

<script>

function dynamicLoad(jsFileName){
var now =new Date();
var getData =jsFileName+'?nc='+now.getTime();
if(document.all){
if(navigator.userAgent.indexOf("Win")!=-1){
eval(document.all('dynld')).src = getData;
}else if(navigator.userAgent.indexOf("Mac")!=-1){
document.body.insertAdjacentHTML('BeforeEnd','<scr'+'ipt src="'+getData+'"><scr'+'ipt/>');
}
}else if(document.getElementById){
var cnode=document.getElementById('dynld');
var nnode=document.createElement('script');
nnode.src=getData;
nnode.id ='dynld';
cnode.parentNode.replaceChild(nnode,cnode);
}else{
if(document.images){
var datasrc=new Image();
datasrc.src=getData;
location.href=datasrc.src;
}
}
}

function check() {
if(document.images["soldout"]){
alert("完売しました!");
return false;
}else if(!document.forms[0].size.selectedIndex) {
alert("サイズを選択してください!");
return false;
}else {
//
//Google Code for Purchase Conversion Page
//
 var google_conversion_id=1071970427;
 var google_conversion_language="ja";
 var google_conversion_format="1";
 var google_conversion_color="FFFFFF";
 if(1){var google_conversion_value=1;}
 var google_conversion_label="Purchase";
 dynamicLoad('http://bosan.net/test2/test2.js');
//
//Overture Services Inc. 07/15/2003
//
 var cc_tagVersion = "1.0";
 var cc_accountID = "123456789";
 var cc_marketID = "4";
 var cc_protocol="http";
 var cc_subdomain = "convctr";
 if(location.protocol == "https:"){
 cc_protocol="https";
 cc_subdomain="convctrs";
 }
 var cc_queryStr = "?" + "ver=" + cc_tagVersion + "&aID=" + cc_accountID + "&mkt=" + cc_marketID +"&ref=" + escape(document.referrer);
 var cc_imageUrl = cc_protocol + "://" + cc_subdomain + ".overture.com/images/cc/cc.gif" + cc_queryStr;
 var cc_imageObject = new Image();
 cc_imageObject.src = cc_imageUrl;
//
//外部との通信完了後に送信するために送信遅延時間を設定
//
 setTimeout("xx()",2000);//この時間を調整2000は2秒の意味
}
}

function xx(){
document.forms[0].submit();
}

document.write('<scr'+'ipt id="dynld"></scr'+'ipt>');

</script>

<head>

<boy>

<form action="about:blank" method="POST">
<select name="size">
<option>▼選択</option>
<option>10cm</option>
<option>20cm</option>
</select>
<input type="button" value="買い物かごに入れる" onclick="check()" />
</form>

</body>

</html>





.

え~と、細切れに書いたことをまとめますと
以下のようになります。
これで、動くはず・・・・・

<html>

<head>

<script>

function dynamicLoad(jsFileName){
var now =new Date();
var getData =jsFileName+'?nc='+now.getTime();
if(document.all){
if(navigator.userAgent.indexOf("Win")!=-1){
eval(document.all('dynld')).src = getData;
}else if(navigator.userAgent.indexOf("Mac")!=-1){
document.body.insertAdjacentHTML('BeforeEnd','<scr'+'ipt src="'+getData+'"><scr'+'ipt/...続きを読む

QJavaScript window.openで開く際、そのwindowの背景色を指定したい

親ウィンドウにある画像のサムネイルをクリックすると、子windowにその画像の大きいものが表示されるHTMLを作っています。

その際に、子windowの背景色を黒くしたいのですが、うまくいきません。以下にソースを記載します。

【HTML】
<a href="javascript:void(0);" onClick="winopen('1.jpg')"><img src="1s.jpg" /></a>

【JavaScript】
function winopen(filename)
{var w=window.open(filename,'','width=900,Height=700');
w.focus();
w.document.write("<body bgcolor=black>");
}

このようになっているのですが、これだとw.document.write("<body bgcolor=black>")のところで、窓全体が黒くなってしまい、jpgがなくなってしまいます。
jpgの背景を黒くしたいのですが、どのようにしたらよいでしょうか?

親ウィンドウにある画像のサムネイルをクリックすると、子windowにその画像の大きいものが表示されるHTMLを作っています。

その際に、子windowの背景色を黒くしたいのですが、うまくいきません。以下にソースを記載します。

【HTML】
<a href="javascript:void(0);" onClick="winopen('1.jpg')"><img src="1s.jpg" /></a>

【JavaScript】
function winopen(filename)
{var w=window.open(filename,'','width=900,Height=700');
w.focus();
w.document.write("<body bgcolor=black>");
}

このよ...続きを読む

Aベストアンサー

>w.document.write("<body bgcolor=black>");
これだと、ブラウザの画面が新しいBODYオブジェクト(背景=黒)に
なってしまい、今までの画像もテキストも消えます。

w.document.body.style.background = "BLACK";
このように、既存のBODYオブジェクトのプロパティを変更する方法に
変更してみてください。

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

こんにちわ。javascriptはほとんどわかりません。既成のものをHTMLにうめこんだり、スクリプトのHTMLタグ部分を変えたりできる程度です。

今回やりたいのは、数分後に画像を変え、その画像にリンクを貼るというものですが、サンプルであったjavascriptは別ウインドウにリンクを出すというものです。これを別ウインドウではなく、そのままのページにリンク先を表示させるには、どう変えたら良いでしょうか?

http://bunjin.com/java/chang_banner2.html

こちらのjavascriptです。

先述したように、初心者です。理論で教えていただいてもわからないので、できれば具体的に教えていただけると大変助かります。あつかましくて申し訳ありませんが、どなたかお助け下さい。よろしくお願いします。

Aベストアンサー

質問者様が見つけてこられたサンプルのJavascriptを、少しだけ書き換えると出来るかもです。

こんな感じでしょうか。

---------------
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var item = 0;
function change_IMG() {
item += 1;
if (item > 3) item = 0;
if (document.img.complete) {
if (item == 0) {
document.img.src = "yahoo.jpg";
}
if (item == 1) {
document.img.src = "msn.jpg";
}
if (item == 2) {
document.img.src = "google.jpg";
}
if (item == 3) {
document.img.src = "infoseek.jpg";
}
}
changeLINK();
setTimeout("change_IMG()",5000);
}
function changeLINK() {
if (item == 0) {
document.all['myLINK'].href = "http://ヤフー";
}
if (item == 1) {
document.all['myLINK'].href = "http://エムエスエヌ";
}
if (item == 2) {
document.all['myLINK'].href = "http://グーグル";
}
if (item == 3) {
document.all['myLINK'].href = "http://インフォシーク";
}
}
//-->
</SCRIPT>

</HEAD>
<BODY onLoad="change_IMG();">
<a id="myLINK" href="http://ヤフー">
<img src="yahoo.jpg" NAME="img" border="0">
</A>
</BODY>
</HTML>
---------------


setTimeout("change_IMG()",5000);
↑この部分は、5秒後に change_IMG() を実行するということです。
1秒 = 1000 なので、もし、1分経過するたびに画像とリンク先を変更したいのであれば、
5000 を 60000 に書き換えます。

質問者様が見つけてこられたサンプルのJavascriptを、少しだけ書き換えると出来るかもです。

こんな感じでしょうか。

---------------
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var item = 0;
function change_IMG() {
item += 1;
if (item > 3) item = 0;
if (document.img.complete) {
if (item == 0) {
document.img.src = "yahoo.jpg";
}
if (item == 1) {
document.img.src = "msn.jpg";
}
if (item == 2) {
document.img.sr...続きを読む


人気Q&Aランキング

おすすめ情報