人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

四季でテーブルの背景画像(計4枚の画像)が変わるjavascriptとHTML内の記述の仕方もおしえてください。


どなたかご教示お願いいたします。

●質問者: ykan
●カテゴリ:ウェブ制作
✍キーワード:HTML JavaScript 四季 画像 記述
○ 状態 :終了
└ 回答数 : 3/6件

▽最新の回答へ

1 ● Azsa
●24ポイント

四季をどう考えるかにもよりますが、

春…3〜5月

夏…6〜8月

秋…9〜11月

冬…12月、1〜2月

とするならば、以下のコードを画像を表示したいHTMLの箇所に埋め込んでやればうまくいくと思います。

<script language=”javascript”>

<!--

var today = new date();

var nMonth = today.getMonth();

var strImageName;

if(10 < nMonth || nMonth < 2)

{

strImageName = ”<img src=’”spring.jpeg’”>”;//冬の画像

}

else if(nMonth < 5)

{

strImageName = ”<img src=’”spring.jpeg’”>”;//春の画像

}

else if(nMonth < 8)

{

strImageName = ”<img src=’”summer.jpeg’”>”;//夏の画像

}

else

{

strImageName = ”<img src=’”autumn.jpeg’”>”;//秋の画像

}

document.write(strImageName);

-->

</script>

インデントなどは適宜付け直してください。

◎質問者からの返答

HTMLソース内はどのように記述すればよろしいのでしょうか?


2 ● wutakamille
●23ポイント

http://mugi.cc/js/000926.htm

こちらのページがわかりやすいと思いました。

具体的なソースは↓です。ディレクトリの変え方などはわかりますか?

<script language=”javascript”>

<!--

var img=new Array()

img[0]=”000926img/CUT_150.GIF” //1月

img[1]=”000926img/CUT_145.GIF” //2月

img[2]=”000926img/CUT_149.GIF” //3月

img[3]=”000926img/CUT_154.GIF” //4月

img[4]=”000926img/CUT_146.GIF” //5月

img[5]=”000926img/CUT_153.GIF” //6月

img[6]=”000926img/CUT_148.GIF” //7月

img[7]=”000926img/CUT_151.GIF” //8月

img[8]=”000926img/CUT_143.GIF” //9月

img[9]=”000926img/CUT_144.GIF” //10月

img[10]=”000926img/CUT_152.GIF” //11月

img[11]=”000926img/CUT_146.GIF” //12月

var m=(new Date()).getMonth()

document.writeln(’<img src=”’+img[m]+’”>’)

//-->

</script>


3 ● catv
●23ポイント

<SCRIPT languqge=javascript>

<!--

//季節ごと(月ごと)にテーブル背景を変えるjavascript

//日付判定

now=new Date();

month=now.getMonth()+1;

//季節判定

var bgimages;

//12月又は1〜2月

if (month==12 || month<=2) bgimages=”img/image01.jpg”;

//3〜5月

if (month>=3 && month<=5) bgimages=”img/image02.jpg”;

//6〜8月

if (month>=6 && month<=8) bgimages=”img/image03.jpg”;

//9〜11月

if (month>=9 && month<=11) bgimages=”img/image04.jpg”;

//TABLEタブ記述開始

document.write(”<TABLE”);

//背景色指定

document.write(” background=”,bgimages);

//その他オプション指定(省略可)

document.write(” border=0 cellpadding=4 cellspacing=0”);

//TABLEタブ記述終了

document.write(”>”);

//ここまで

// -->

</SCRIPT>

<NOSCRIPT><TABLEbackground=img/image00.jpg border=0 cellpadding=4 cellspacing=0></NOSCRIPT>

<!--Javascriptが使用できない人にはimage00.jpgを表示-->

<!--以下通常のhtmlを記述-->

<TR>

<TD>TEST</TD>

<TD>TEST</TD>

<TD>TEST</TD>

</TR>

<TR>

<TD>TEST</TD>

<TD>TEST</TD>

<TD>TEST</TD>

</TR>

</TABLE>

---

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ