JavaScript Tips collection

JavaScript によるスクロールメッセージは結構古いテクニックで、色々な手法がありますが、現在ではこの手法を使用したページは少なくなっているようです。

この手法はウィンドウステータス領域に表示させるのが一般的ですが、この他にも FORM のテキスト入力域に表示する方法があります。

スクロールメッセージの最も効果的な用途は次の項目ではないでしょうか。

<script language="JavaScript"><!--
stwidth  = 80;   // 表示領域の幅(文字数)
interval = 150;  // インターバル時間(msec)
tid      = null; // タイマ識別子

stblank  = ''; for(var i=0;i<stwidth;i++) stblank+=' ';
curScr   = new scrObj('',interval,window);
oldScr   = '';

// スクロールオブジェクト
function scrObj(msg,ival,target){
  this.ststrip= stblank+msg+stblank;
  this.msgstr = msg;
  this.msglen = msg.length;
  this.stpos  = 0;
  this.interval = ival;
  this.target = target;
  return this;
}
// スクロール関数
function scrollMsg(){
  curScr.stpos++;
  if(curScr.stpos==stwidth+curScr.msglen) curScr.stpos=0;
  var msg = curScr.ststrip.substring(
              curScr.stpos,curScr.stpos+stwidth);
  if(curScr.target==window) window.status=msg;
  else                      curScr.target.value=msg;
  tid=setTimeout('scrollMsg()',curScr.interval);
}
// スクロール処理取消関数
function cancelMsgTime(){
  if(tid){ clearTimeout(tid); tid=null; }
}
// スクロール処理の初期化関数
function setScrollMsg(msg,save,target){
  if(save) oldScr=curScr;
  curScr=new scrObj(msg,interval,target);
  cancelMsgTime();
  scrollMsg();
}
}
// スクロール文字の復元関数
function recoverMsg(){ curScr=oldScr; }
// --></script>

この文字の部分は必要に応じて修正します。

stwidthは表示領域の幅(文字幅)で、 intervalは更新周期の時間です。

stwidthの値は小さいと領域の途中から現れ、大きいとなかなか表示されません。適切な長さに調節してください。

intervalは更新周期なので、小さくすると早く動作しますが、CPUの負担になる場合があります。

使用方法は onLoad や onMouseOver など、メッセージ表示を開始したいイベント発生時に setScrollMsg 関数を呼出し、表示を停止したい場合は同様に cancelMsgTime 関数を呼び出します。また、onLoad, onMouseOver 両者を共存させるなら onMouseOut時には cancelMsgTime の代わりに recoverMsg 関数を呼び出します。

各関数の呼出形式は以下の通りです。

setScrollMsg(msg,save,target);
msg    : 表示したいメッセージ
save   : 現在状態を退避する(true)かしない(false)か。
target : 表示先( window または FORM のテキストオブジェクト )

cancelMsgTime();
引数なし

recoverMsg();
引数なし

使い方はページが表示されたと同時に「Welcome!」のメッセージを表示するなら BODYタグの onLoad, onUnload イベントを使用します。

<body ... onLoad="setScrollMsg('Welcome!',false,window);"
          onUnload="cancelMsgTime();">

リンク上にマウスが来ている間「ちはっ」と表示するなら以下のようにします。

<a href="hogehoge.htm"
   onMouseOver="setScrollMsg('ちはっ',true,window);"
   onMouseOut ="cancelMsgTime();window.status=''">リンク</a>

<body ... onLoad="setScrollMsg('Welcome!',false,window);"
          onUnload="cancelMsgTime();">
    :
<a href="hogehoge.htm"
   onMouseOver="setScrollMsg('ちはっ',true,window);"
   onMouseOut ="recoverMsg();">リンク</a>

ページの装飾に関するTips

スクロールメッセージ