色変わり連続シンプル
これは一行分のタイプライタ表示が終わったら次の行に移り、その時に前の行の色変わりが起こります。色変わりが継続します。
色変わり連続沸くも色変わり枠を付けて沸くも色変わります。
音楽連続演奏で色変わり（タイプライタ+枠）これが目的としていた最終ひな形です。OEではbgsoundタグで複数のmidiを添付できますが、連続演奏するということはできません。それをスクリプトによってbgsoundのsrcを変更することで実現しています。変更するために曲の長さを予め調べておく必要があります。このことは以前の歌詞表示でも述べましたように、midiの演奏時間を表示してくれるソフトウェアがあると難しくはありません。
ソースを上から見ていきましょう。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html
xmlns:v = "urn:schemas-microsoft-com:vml">
<head>
<meta
http-equiv="content-type" content="text/html; charset=shift_jis">
<META
http-equiv="Content-Style-Type" content="text/css">
<title>midi連続演奏+枠とタイプライタ文字と雪降り文字の色変わり</title>
<style>
v\:*{behavior:
url(#default#VML)}
</style>
ここまでいいですね。styleにあるbehaviorはvプリフィックスに対する振る舞いをIEがデフォルトで持っているVMLに当てはめるという意味です。VML用のdll（vgx.dll）などを使用して、VMLレンダリングを行います。このひな形ではクリスマスツリー部分にVMLを使用しています。
<!--以下 bgsoundタグで曲を入れます。何曲でもOKですが、メールの場合はフルパスにしてください-->
<bgsound
src="happy_christmas_gs.mid" volume="0" loop="1">
<bgsound
src="Joy_World.mid" volume="0" loop="1">
<bgsound
src="jingle_bell_gs.mid" volume="0" loop="1">
<bgsound
src="silent_night.mid" volume="0" loop="1">
<bgsound
src="akahana_no_tonakai.mid" volume="0" loop="1">
</head>
bgsoundタグは複数使用できます。複数ある場合一番最初のbgsoundタグが再生に使用されるようです。メールの場合はMIDIファイルをフルパスで指定してください。これは本来bgsoundタグがhead部分に置かなければならないため、baseタグの基準パスが使えなくなることを考慮しているのかもしれません。
<body id="body1" style="margin:0px; background-color:black;
overflow:auto; filter:progid:DXImageTransform.Microsoft.GradientWipe(gradientsize=0.5)">
<!--背景画像のセット用divエレメントです。曲数分imgタグで書き加えてください。-->
<div
id="setimg" style="position:absolute; width:0px; height:0px;
display:none; left:-1000px">
<img
src="decwall04.gif">
<img src="kabe02.gif">
<img
src="k_xm02a.gif">
<img src="w_sora01a.gif">
<img
src="tonak02b.gif">
</div>
divエレメントにidを付けた上でその子エレメントとしてimgエレメントを入れています。包括エレメントのdivはdisplay:noneにより表示されなくなります。ここはbodyの背景画像のファイルを添付させて利用するためのものです。bodyの背景画像を音楽の変更に合わせて変更します。
bodyエレメントですが、margin:0pxでマージンをデフォルト状態から0ピクセルに変更、overflow:autoはパソコンの表示領域が小さい場合にスクロールバーを表示させるためのものです。グラデーションワイプというトランジションフィルタをかけていますが、これも曲変更に合わせてトランジション効果で表示を変更させたいからです。
<div style="position:absolute; display:none; z-index:99; left:10px;
top:10px; color:white; background-color:black">下記テキストエリアにメッセージを書きます。カンマ","で区切り文字になります。改行はカンマを二つ続けてください。</div>
<textarea
id="f1" rows="7" cols="101" style="left:50px;
top:50px; position:absolute; visibility:hidden; z-index:5">H,a,p,p,y,
,C,h,r,i,s,t,m,a,s,!</textarea>
ここのdivはOEの編集画面での説明です。このdivはdisplay:noneによりプレビュー画面では表示されなくなります。テキストエリアはタイプライタメッセージをOEの編集画面で書き換えるために用意したものです。このテキストエリアもOEプレビュー画面ではvisibility:hiddenで見えなくなります。改行は,,とします。split(",")で分割した時にNULL状態になるので、nullの時には<BR>タグを追加するようにスクリプト処理します。
<!-- 次のdivエレメントの設定でサイズなどが決定します。-->
<div
id="div1" onclick="mrand=1-mrand" style="cursor:hand;
background-color:#00aa00; width:850px; height:210px; position:absolute; left:150px;
top:5px; z-index:1; overflow:hidden; margin:0px"></div>
このdiv1がタイプライタ表示などのステージになります。以降のスクリプト部分で明らかになりますが、スクリプトでこのdiv1にdivエレメントを重ね入れ、ステージにします。onclick="mrand=1-mrand"・・・mrandはフラグの役目をします。曲の変更をランダムにするかのフラグです。1の時はランダムに、0の時は順送りになります。div1をクリックのたびに0と1交互の値に変わりますね。overflow:hiddenははみ出た部分を表示させないまたスクロールバーを出さないために必要です。
説明===>工事中！