<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()を実行します.
|