今日は、これまでに勉強した「マーキー」と「マージン」を応用したもの で、SALTYのトップページに表示している「走る列車」の説明をします。

 それまでは、 あのような表示をするには Java Applet などを使ったもの しかありませんでした。当然重くなります。<MARQUEE> を使ってでき ないだろうかと二昼夜考え、試行錯誤の結果完成しました。

 これをホームページにアップした時は大評判になりました。それまでは、 一日に数百だったアクセス数が一気に数倍になりました。国内は元より、 海外からも多数の賞賛のメールが届きました。私にとって、正に至福の時で した。

 後になってみれば、「マーキー」と「マージン」を応用したものですから 初心者にも可能な簡単なことなのです。あっという間に、この技法を使うホ ームページが多数現れました。発想が大切なのですね。

 <MARQUEE> は、文字や画像をスクロールさせるタグです。スクロー ルする方向を指定しなければ、右から左へ移動を繰り返します。

 移動する方向を指定するには、DIRECTION を使います。

 <MARQUEE DIRECTION="right"> は、左から右へ移動します。上は "up"、下は "down" です。

 移動する速度を指定するには2通りあります。

 「SCROLLAMOUNT」は、移動する幅です。「SCROLLAMOUNT="10"」は、10px ずつ移動します。

 「SCROLLDERAY」は、移動する時間です。「SCROLLDERAY="100"」は、1000 分の 100 秒単位で移動します。

 移動する幅が大きければ速く移動し、移動する時間が短いほど速く移動し ます。移動する幅が小さく、移動する時間が短いほど、動きが滑らかになり ます。

 複数の列車を、それぞれ別の <MARQUEE> で指定します。 ただ指定 したのでは上下に次々と表示されるだけです。そこで使ったのは「マイナス マージン」です。 これは、No.017 の「文字を重ねて表示する」でやりまし たね。下記のように記述します。

<DIV style="margin-top:-25pt"> <MARQUEE SCROLLAMOUNT="5"><IMG SRC="train-2/train3.gif"> </MARQUEE></DIV>

 背景画像は「BACKGROUND="train-2/town.gif"」のように指定します。

 列車の画像の背景と窓は透過しておきます。









<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY><BR><BR>
<TABLE WIDTH="100%"><TR>
<TD BACKGROUND="../train-2/town.gif">
<DIV style="margin-top:6pt">
<MARQUEE DIRECTION="right" SCROLLAMOUNT="2" SCROLLDELAY="72">
<IMG SRC="../train-2/train4.gif"></MARQUEE>
</DIV><BR>
<DIV style="margin-top:-25pt">
<MARQUEE SCROLLAMOUNT="5"><IMG SRC="../train-2/train3.gif">
</MARQUEE></DIV><BR>
<DIV style="margin-top:-25pt">
<MARQUEE DIRECTION="right" SCROLLAMOUNT="15">
<IMG SRC="../train-2/train2.gif"></MARQUEE></DIV>
<BR><DIV style="margin-top:-25pt">
<MARQUEE SCROLLAMOUNT="10"><IMG SRC="../train-2/train1.gif">
</MARQUEE></DIV></TD></TR></TABLE>
</DIV>
</BODY>
</HTML>