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

 タイトル文字列を順番に切り替えて表示する

IE5.0以降のみ(Macintosh版IE5.0では表示されない場合があります)

JAVA Scriptを使って、個々の変数に格納した文字列を順に表示させるようにすると、文字列を順番に切り替えて表示することができます。ここでは、文字列を次々に切り替えて画面に表示させる方法を考えてみましょう。

■ 表示する文字列の定義

まず目的の文字列を個別の変数に格納し、次に表示方法(切り替え順や速度)をJAVA Scriptで定義します。

var counter = 1
var msg1 = "ようこそ"
var msg2 = "Shirleyの小箱へ!"
var msg3 = "ここには"
var msg4 = "沢山の小物が"
var msg5 = "集まっています。"
var msg6 = "どうぞ、ゆっくり"
var msg3 = "楽しんでいってください。"
function movie() {
if(counter == 1) {
div1.innerText = msg1
counter = counter + 1
} else if(counter == 2) {
div1.innerText = msg2
counter = counter + 1
} else if(counter == 3) {
div1.innerText = msg3
counter = counter + 1
} else if(counter == 4) {
div1.innerText = msg4
counter = counter + 1
} else if(counter == 5) {
div1.innerText = msg5
counter = counter + 1
} else if(counter == 6) {
div1.innerText = msg6
counter = counter + 1
} else {
div1.innerText = msg7
counter = 1
}
setTimeout("movie()",2000)
}

例では、変数内の数値(変数名:counter)を増減させて、その値によって文字列を切り替えるようにJAVA Scriptで設定しています。そのため、まず最初に数値と各文字列を変数に格納しておくことが大切です。
例のスクリプトでは、「counter」の数値が1の場合には「msg1」の内容を画面に表示し、その後、「counter」に1をプラスすることで「msg2」「msg3」と次の内容を呼び出す仕組みになっています。文字の切り替えを繰り返すには、最後の「msg7」の内容を画面に表示した後に「counter」を1に戻すようにしておきます。
■ 文字の切り替えを開始するタイミングの設定

上で定義した文字の表示をを変更する関数をいつ実行するかを設定します。

<BODY onLoad="movie();>

例では、ホームページを読み込んだタイミングで実行するように設定しています。

■ 切り替える文字の設定

表示する文字内容にIDをつけ、文字の設定を行います。

<DIV ID="div1" STYLE="font-size:28pt;color:#ff0000;font-weight:bold;text-align:center;">

文字サイズは、表示する文字数によって、読みやすい大きさに設定します。

■ 「setTimeout」プロパティ

例では、「setTimeout」に2000を指定することで2秒ごとに文字列を切り替えています。ただし、表示する文字列の長さによっては、読み終わる前に切り替わってしまったり、切り替わる時間がかかりすぎてしまうことがあります。表示する文字列の長さによって「setTimout」の数値を調整すると良いでしょう。

<<<戻る

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