Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

時刻に応じて表示するイメージを変更する

 

ビジターが訪問した時刻により、異なるイメージを自動的に表示するJAVA Scriptを書いてみます。朝向け、昼向け、夜向けといったように、その時刻にあったイメージを表示させることができます。

■ イメージプレースホルダーの挿入

まず、時刻によって変化させるイメージの表示場所にイメージプレースホルダーを挿入します。
イメージプレースホルダーとは、本来、実際に使用するイメージが完成する雨などに代替として挿入するためのものです。
挿入場所をクリックし、【挿入】バーの【一般】カテゴリから、【イメージプレースホルダー】ボタンをクリックして、ダイアログで設定を行います。【名前】は、JAVA Scriptを記述する際必要です。

■ JAVA Scriptの記述

次にコードビューで<head>〜</head>部分に以下のようなJAVA Scriptを記述します。


<SCRIPT LANGUAGE="JavaScript">
<!--
function timeWall() {
day = new Date();
hour = day.getHours();
if (hour <= 3) { document.images["PICTURE"].src = ../assets/images/wall01.jpg' }
else
if (hour <= 5) { document.images["PICTURE"].src = '../assets/images/wall02.jpg' }
else
if (hour <= 10) { document.images["PICTURE"].src = '../assets/images/wall03.jpg' }
else
if (hour <= 14) { document.images["PICTURE"].src = '../assets/images/wall04.jpg' }
else
if (hour <= 17) { document.images["PICTURE"].src = '../assets/images/wall05.jpg' }
else
if (hour < 21) { document.images["PICTURE"].src = '../assets/images/wall06.jpg' }
else
if (hour <= 23) { document.images["PICTURE"].src = '../assets/images/wall07.jpg' }
}
//-->
</SCRIPT>

■ イベントの設定

最後にビヘイビアパネルでイベントの設定をします。ロード時に記述したJAVA Scriptを実行するため、<body>タグを選び、【ビヘイビア】パネルから【JAVA Scriptの呼出し】アクションを選択して、「 timeWall()」を指定し、イベントを「onLoad」にします。

■ 作例

 

 

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box