<head>
<script language="JavaScript">
<!--
var ScrMsg = "__________Welcome_to_The_Island_Of_Azuki__________"; //(1)
var SmallMoji = "welcomthisandfzuk_"; //(2)
var cnt=0; //カウンタ用変数
function prepare(){ //(3)
var i;
for( i = 0; i < 10; i++ ) document.write( "<img width=16 height=16 name='img", i , "'>" );
}
function Scroll(){ //(4)
var i,fn,msg;
if( cnt == ScrMsg.length - 10 ) cnt = 0; //(5)
msg = ScrMsg.substring( cnt , cnt + 10 ); //(6)
for( i = 0; i < 10; i++ ){
fn = msg.charAt( i ); //(7)
if( SmallMoji.indexOf( fn ) < 0 ) fn = fn + "l"; //(8)
fn = fn + ".gif";
document.images["img"+i].src = "../img/" + fn; //(9)
}
cnt++;
setTimeout( "Scroll()" , 400 );
}
//-->
</script>
</head>
<body onload="Scroll()"> //(10)
<script language="JavaScript">
<!--
prepare(); //スクロールを表示したい位置に記述します．
//-->
</script>
</body>
|
あらかじめスクロールに必要な文字の画像(16×16)を左の表のように用意しておきます．全て透過gifとしました．ファイルネームはその文字そのものをファイルネームとします．つまりaという文字ならa.gif，tという文字ならt.gifのようにします．また大文字のの場合にはさらに大文字を表す"l"（largeという意味で）をファイルネームに連結しました．したがって大文字Wはwl.gifとしました．_.gifはスペースのための画像です． スクロール表示のための<img width=16 height=16>をここでは10個用意し，この個々の画像を交換することによって，文字列画像をスクロールさせます． (1)スクロールさせるメッセージです．スペースは_で表します． (2)これはスクロールさせる文字を全て小文字で羅列したもので，小文字か大文字か区別するために必要となります． (3)スクロール表示のための<img>を10個用意します． (4)スクロールのための関数． (5)スクロールさせる文字列の一番最後の〜Azukiのiが一番左に表示されたときに，cntを0の戻します．これにより繰り返し何回もスクロールします． (6)ScrMsg.substring( cnt , cnt+10 )とすることによりScrMsgのcnt番目の文字から10個の文字列を取得します．これが実際に表示する文字列です．いわばここで実質的に文字列をスクロールさせています． (7)表示する文字をfnに取得します． (8)ここで文字が大文字か，小文字か区別します．fnがSmallMojiの中に存在する場合は，小文字ということになりfnはそのままにしておきます．しかし，存在しない場合は，大文字ということになり，fnに"l"を連結します．そしてfnに".gif"を連結し，最終的にfnは表示する文字画像のファイルネームとなります． (9)ここで表示する文字画像に交換します． (10)ページのロードと同時にScroll()を実行します．
|