本日  昨日
 
03/16(Sun) 01:26

o 時刻毎に変わる画像表示

時刻毎に変わるオープニングメッセージを表示する方法(ソフト工作室時刻毎にメッセージ(2)にあります。)はご存じだと思います。ここではメッセージの代わりに画像で表示する方法を紹介します。

  1. 画像パス定義用関数makeImage()をヘッダー部に記述します。
  2. 画像を表示したい場所に、関数printImage()を実行するコマンドをJavaScriptでボディ部に記述します。
時刻毎の画像表示例:

月毎の画像表示例:

(注1)11、12の画像を準備してないため、11時/11月は15、12時/12月は20の顔画像が表示されます
(注2)午前は通常画像、午後は半透明画像が表示されます


関数makeImage()をヘッダー部に定義します。

画像のパスは、このスクリプトを記述したhtml文、からみた相対パス、絶対パス、URLで指定します。パスの指定のしかたはこちらです。
<SCRIPT language="JavaScript"> <!-- //時刻毎に変わる画像 by「菊池さん」<http://kikuchisan.net/> function makeImage() { this[0] = "../../gif/kao20_f.gif"; this[1] = "../../gif/kao1_o.gif"; this[2] = "../../gif/kao2_o.gif"; this[3] = "../../gif/kao3_o.gif"; this[4] = "../../gif/kao4_o.gif"; this[5] = "../../gif/kao5_o.gif"; this[6] = "../../gif/kao6_o.gif"; this[7] = "../../gif/kao7_o.gif"; this[8] = "../../gif/kao8_o.gif"; this[9] = "../../gif/kao9_o.gif"; this[10] = "../../gif/kao10_o.gif"; this[11] = "../../gif/kao15_o.gif"; this[12] = "../../gif/kao20_o.gif"; this[13] = "../../gif/kao1_f.gif"; this[14] = "../../gif/kao2_f.gif"; this[15] = "../../gif/kao3_f.gif"; this[16] = "../../gif/kao4_f.gif"; this[17] = "../../gif/kao5_f.gif"; this[18] = "../../gif/kao6_f.gif"; this[19] = "../../gif/kao7_f.gif"; this[20] = "../../gif/kao8_f.gif"; this[21] = "../../gif/kao9_f.gif"; this[22] = "../../gif/kao10_f.gif"; this[23] = "../../gif/kao15_f.gif"; } mes = new makeImage(); //雛形を作成します function printImage() { //画像の表示を行います d=new Date(); h=d.getHours(); document.write("<img src="+mes[h]+">"); } // --> </SCRIPT>


画像を表示したい場所に、関数printImage()を実行するコマンドをJavaScriptで<BODY>〜</BODY>内に記述します。

<script language="JavaScript"> <!-- //時刻毎の画像表示 printImage(); // --> </script>


【応用】月ごとに画像表示を切り替えたい場合は以下のようにします
<SCRIPT language="JavaScript"> <!-- //月毎に変わる画像 by「菊池さん」<http://kikuchisan.net/> function makeImageM() { this[0] = "../../gif/kao1_o.gif"; this[1] = "../../gif/kao2_o.gif"; this[2] = "../../gif/kao3_o.gif"; this[3] = "../../gif/kao4_o.gif"; this[4] = "../../gif/kao5_o.gif"; this[5] = "../../gif/kao6_o.gif"; this[6] = "../../gif/kao7_o.gif"; this[7] = "../../gif/kao8_o.gif"; this[8] = "../../gif/kao9_o.gif"; this[9] = "../../gif/kao10_o.gif"; this[10] = "../../gif/kao15_o.gif"; this[11] = "../../gif/kao20_o.gif"; } mesM = new makeImageM(); //雛形を作成します function printImageM() { //画像の表示を行います d=new Date(); m=d.getMonth(); document.write("<img src="+mesM[m]+">"); } // --> </SCRIPT>
<script language="JavaScript"> <!-- //月毎の画像表示 printImageM(); // --> </script>


 
 
©1997- Kikuchisan's workshop All rights reserved //

スポンサーリンク

関連コンテンツ