ただ、DHTMLを使った動的なWebコンテンツといっても、そうとう範囲が広く、ここでは文字を画像としてアニメに活かす２つの具体例を以下に挙げておきます。
それを具体的なスクリプトにすると、まずヘッダ部への記述が･･････
結果はこのとおりです。
仕組みが気になるかたのためいちおう説明しておくと、このスクリプトはページ全体へ｢document.write()｣で｢aliceblue｣に指定した｢●｣の文字列を書き出し、｢setObj()｣関数でランダムな位置へ並べ、｢objMove()｣関数でそれらを上から下に等速で動かすというものです。ただ、下方向へ動くだけでだと雪らしく見えないので、等速で移動しながら振り子のように左右へ揺らします。ここで｢Math｣オブジェクトの｢cos｣メソッド、つまりコサインを使っているわけです。
CSS(スタイル･シート)やJavaスクリプトの拡張機能はインターネット･エクスプローラ(Microsoft社)とネットスケープで年々開きが出ており、上記の実例はどちらも前者でしか機能しません。ネットスケープを使用の場合は目が動かなかったり、雪どころかその背景画像すら表示されませんので、ご注意下さい。
スタイルシート(CSS)との組み合わせ
第２章で触れたスタイルシート(CSS)をJavaスクリプトと組み合わせることで動的なWebコンテンツの作成が可能となり、これをDynamic HTMLあるいはDHTMLと呼びます。現在の主流といえば、他にMacromedia社のフラッシュやショックウェイブなどのプラグインを使ったり、JavaやActive Xといったコンパイル済みのバイナリデータを使う方法もありますが、DHTMLの強みは開発するための特別なツールを必要とせず、サーバー側へもクライアント(ブラウザ)側へもこれといった拡張を強要しません。マウスによる文字の制御
コンピュータで使える一般的な文字を探せば｢●｣、｢▲｣、｢■｣、｢×｣、｢＋｣など画像へ活かせそうなものが、いくらでも見つかります。たとえば、｢onMouseOut｣や｢onMouseOver｣の例でご紹介した目玉が回る画像(GIFアニメーション)の目玉そのものは｢●｣と変わりません。つまり、目抜きの静止画像を背景に｢●｣を２つ並べても同じような効果が獲られるばかりか、目玉の動きはコントロールが自由なはずです。
両目の位置関係をピクセル値で指定しているのがスクリプトの最初の５行です。使用される(目抜きの)背景画像の白目の位置と合わせて、これらの数値は変更します。そして、ヘッダ部のスクリプトが書き終わった次はボディーへの記述です。
<head>
<meta http-equiv="imagetoolbar" content="no">
<script>
var r = 2;
var lefteye_x = 313;
var lefteye_y = 198;
var righteye_x = 326;
var righteye_y = 197;
function eyeMove(){
var lefteye_xd = event.x - lefteye_x;
var lefteye_yd = event.y - lefteye_y;
var change1 = Math.sqrt(lefteye_xd * lefteye_xd + lefteye_yd * lefteye_yd);
div1.style.left = lefteye_x + r * lefteye_xd / change1;
div1.style.top = lefteye_y + r * lefteye_yd / change1;
var righteye_xd = event.x - righteye_x;
var righteye_yd = event.y - righteye_y;
var change1 = Math.sqrt(righteye_xd * righteye_xd + righteye_yd * righteye_yd);
div2.style.left = righteye_x + r * righteye_xd / change1;
div2.style.top = righteye_y + r * righteye_yd / change1;}
</script>
</head>
<body onmousemove="eyeMove()" topmargin=8>
一般のＨＴＭＬ文書で画像を挿入する場合と同じく、このスクリプトも本文(ボディー)の背景画像を置きたい位置へ書き込みます。スクリプトの赤文字で示した部分が順に、｢背景画像(../../images/rolling4.jpg)｣、｢背景画像の位置関係(top:20;left:30;width:80)｣、｢背景画像をクリックした時の左目として使う文字(・)｣、｢背景画像をクリックした時の右目として使う文字(・)｣、｢左目として使う文字(●)｣、｢右目として使う文字(●)｣、｢左目の位置関係と使う文字(font-size:3pt;left:63;top:58;">●)｣、｢右目の位置関係と使う文字(font-size:3pt;left:76;top:57;">●)をそれぞれ指定いるので、これらもご使用になる背景画像や目として使う文字およびその位置関係と合わせて変更します。
<a href="" onClick="window.top.close()"><img src="../../images/rolling4.jpg"
border=0 style="position:absolute;top:160;left:280;width:80;cursor:hand;"
onmousedown="div1.innerText='・';div2.innerText='・'"
onmouseup="div1.innerText='●';div2.innerText='●'"></a>
<div id=div1 style="position:absolute;font-size:3pt;left:313;top:198;">●</div>
<div id=div2 style="position:absolute;font-size:3pt;left:326;top:197;">●</div>
三角関数による文字の制御
目玉に使った｢●｣の色を黒から白へ、数とサイズを特定から不特定多数へ、動きを(マウスによる)手動から(三角関数による)自動へと、いくつかの条件を変えれば雪景色だって作れます。三角関数のコサインを応用しているため、ややヘッダ部のスクリプトは長くなりますが、難しく考えることはありません。とりあえず、以下の記述例よりスクリプトを丸ごとコピーし、雪を降らせたいＨＴＭＬ文書のヘッダ部へ貼り付けます。
続いてボディーへの記述は、｢背景画像(../images/snowing.jpg)｣を変更する以外、ヘッダ部同様、以下の11行を丸ごとコピーしてボディー内の冒頭に貼り付けて下さい。なお、ご自分の背景画像へ変更される場合、元のサイズがどうあれフル画面で表示されます。したがって、画像を選択する際は見る側のブラウザの設定如何で縦横の比率が必ずしも一定しないことだけは考慮したほうが無難です。
<head>
<meta http-equiv="imagetoolbar" content="no">
<script>
function rangeRandom(num1,num2){
if ( (num1 - num2) > 0 ){
var big = num1
var small = num2}
else{
var big = num2
var small = num1}
var range = big - small + 1
var number = Math.floor(Math.random()*range) + small
return(number)}
var freq = 0.08
var weight = 10
var radius = 10
var minHeight = 0
var maxHeight = 100
var minWidth = 0
var maxWidth = 1000
var minObjSize = 2
var maxObjSize = 8
var objNum = 200
var objStr = "●"
var objColor = "aliceblue"
var objSpeed = 10
var timerID
var time = 1
function objMove(){
if(time > 0){
time = time + freq
for(var k = 0 ; k < objArray.length ; k++){
var pointX = objPosition[k] + Math.cos(time)*objArray[k].obj_radius
objArray[k].style.pixelLeft = pointX
if(objArray[k].style.pixelTop < document.body.clientHeight){
objArray[k].style.pixelTop += objArray[k].obj_weight}
else{
objArray[k].style.pixelTop = 0}}
timerID = setTimeout("objMove()",objSpeed)}}
var objArray = new Array()
var objPosition = new Array()
function setObj(){
myImg.style.pixelWidth = document.body.clientWidth
myImg.style.pixelHeight = document.body.clientHeight
var CL = document.body.clientWidth
var CT = document.body.clientHeight
for(var i = 0 ; i < document.all("obj").length ; i++){
objArray[i] = document.all("obj").item(i)}
var arrayLength = objArray.length
for(var j = 0 ; j < arrayLength ; j++){
objArray[j].style.fontSize = rangeRandom(minObjSize,maxObjSize)
objArray[j].style.pixelTop = rangeRandom(minHeight,maxHeight)
objArray[j].style.pixelLeft = rangeRandom(minWidth,maxWidth)
objPosition[j] = objArray[j].style.pixelLeft
objArray[j].obj_weight = rangeRandom(1,weight)
objArray[j].obj_radius = rangeRandom(1,radius)}}
function restart(){
history.go(0)}
window.onresize = restart
var playFlag = true
</script>
<script for="document" event="onclick">
if(playFlag == true) {
clearTimeout(timerID)
playFlag = false}
else{
timerID = setTimeout("objMove()",10)
playFlag = true}
</script>
</head>
<body id="body" style="background-color:black;overflow:hidden;"
onload="setObj();objMove()" text=ffffff>
これだけで、ご自分のページへも次の実例のような雪は降らせるのです。じっさい、上記の記述例をヘッダとボディーにそれぞれコピーして背景画像の指定を変更するだけですから、いちど試してみて下さい。
<img id="myImg" src="../images/snowing.jpg"
style="position:absolute;top:0;left:0;z-index:-2;">
<script>
var objStr = "<span id='obj'
style='position:absolute;left:0;top:0;color=:" + objColor + ";'>
" + objStr + "</span>"
for(var i = 0 ; i < objNum ; i++){
document.write(objStr)}
document.close()
</script>