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

ステータスバーに流れる文字を表示する

ブラウザのウィンドウ下にあるステータスバーは、システムからのメッセージ以外にも好きなメッセージを表示させることができます。ここでは、ホームページを開いたと同時にステータスバーに目的のあいさつ文が流れるように表示させる方法を考えてみましょう。

■ 表示する文字列の定義
ステータスバーに文字列を表示するには、まず目的の文字列を変数に格納し、次に文字の伊流れ方(スピードや方向)を定義します。

<script language="JavaScript">
<!--
var TC = 0 ;
var Sm1 = " ";
var Sm2 = " ";
var Sm3 = " ";
var Sm4 = "ここにメッセージを入れます......。";
var Smess = Sm1+Sm2+Sm3+Sm4;
var timeID=setTimeout("",1) ;
function Mess() {
if (TC < 1000) { //ここの数値を変えることによってスクロールする時間が変わります
TC++ ;
window.status = Smess;
Smess = Smess.substring(1,Smess.length) + Smess.substring(0,1);
clearTimeout(timeID)
timeID = setTimeout("Mess()",150);
}
else { window.status = " " }
}
</SCRIPT>

■ スクロールを開始するタイミングの設定

上のように定義した関数(挨拶文を表示スクロール表示させる)をいつ実行するか設定します。

<body bgcolor="#FFFFFF" onLoad="Mess() )">

「onLoad」とは、ページの読み込みが完了した時に発生するイベントです。「onLoad」イベントを使うと、ページの読み込みが完了したタイミングで任意の処理を行わせることができます。

ステータスバーを流れる文字は、変数に格納したあいさつ文の先頭1文字を文末に移動させ、文字列全体を1文字分筒左へずらす作業を素早く繰り返すことで、流れているかのように表示させています。
繰り返しのスピードは「setTimeout」で指定します。数値を大きくすれば速度は遅くなり、数値を小さくすれば素早くなります。文字数が少ない場合には、あまり高速に設定すると文字が判読しにくくなるので、何度か試して最適な値を探し出すと良いでしょう。

<<<戻る

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