温故知新?in work

 
date:2009.10.03   posted by:fujii
 

問題です。

この画像のスライドショーっぽいものは、何で作られているでしょうか?

【選択肢】
1.Flash
2.アニメgif
3.HTML
4.JavaScript

・・・・選びましたか?

正解は3.HTMLです。

これは、今ではもうほとんど使われなくなった「marquee」というタグを使って実現しています。

あいうえおかきくけこさしすせそ

デフォルトの使い方としては上記のように、文字を右から左に流すだけのものなんですが、オプションで指定できるパラメータが結構あって、調整次第では上下左右ナナメどんな方向へも動かせますし、文字だけでなく画像を流すこともできます。

今回のスライドショーもどきは、こんなコードで実現しています。

<marquee scrollamount=”100″ scrolldelay=”3000″ width=”100″ height=”75″><img src=”http://www.thedesignium.com/blog/wp-content/uploads/2009/10/scroll.jpg”/></marquee>

先頭から順に解説すると、
scrollamount・・・・1回に移動する量をピクセル指定します。今回は100なので、1回で画像が100ピクセル左に動きます
scrolldelay・・・・移動の時間間隔をミリ秒で指定します。今回は3000なので、3秒に1回移動することになります
width、height・・・領域の横・縦幅です
img src…・・・流す画像。これです。↓

つまり、このコードを一言で説明すると「3秒に一回、画像を100ピクセル左にずらして表示する」という動作をします。

今はFlashやJavascriptなどの技術を使えば簡単にきれいなスライドショーが作れますが、こういった泥臭いというか時代遅れの技術でいろいろ工夫してみるのも知的(?)でおもしろいんじゃないでしょうか・・・というお話。

 
Copyright © TheDesignium inc. powered by WordPress & mootools.
Relative Keyword|none