twitter ■お問い合わせ当サイトへのリンクサイト仕様

現在位置 > LostTechnology > JavaScript > Blink

Blink

このJavaScriptは2001年3月に発売された著書「わたしにもできる動くホームページ」に収録したものです。Internet Explorer 4の頃に作成したものであるため、そのうちjQuery用にしてもっとシンプルな実装で作成するかもしれません。

指定した要素の文字を点滅させたり、要素そのものを点滅させるためのDynamicHTML(DOM+JavaScript)です。スクリプトはscriptフォルダにあるものとして記述しています。

Sample

Netscape独自タグである<BLINK>および、W3CのCSS1にあるtext-decoration:blinkの代用品。文字のみ点滅。

こちらは要素そのものを点滅させる処理。

<p id="blinkie" style="color:black; background-color:antiquewhite;">Netscape独自タグである&lt;BLINK&gt;および、W3CのCSS1にあるtext-decoration:blinkの代用品。文字のみ点滅。</p>

<p id="blinkelement">こちらは要素そのものを点滅させる処理。</p>

ID名は自由ですが、スクリプトの実行時に必ず指定したID名を使用してください。上段が点滅を用意してないInternet Explorer専用のものでいわば代用品というものであり、下段が要素全体を点滅させる独自のDynamicHTMLです。

なお、文字だけの点滅を行なう場合には、必ず色(color)と背景色(background-color)を指定する必要があります。Netscape6のためにtext-decoration:blinkも併記しておきましょう。2011年の時点でもtext-decoration:blinkまでサポートしているブラウザはほとんどないので、ブラウザを問わず点滅をJavaScriptで行なうようにコードの修正を行ないました。使用する場合にはスタイルシートでblink指定はしないようにしてください。

<SCRIPT type="text/javascript" src="script/blink.js"></SCRIPT>

ここからスクリプトをファイルに保存して、<HEAD>~</HEAD>内に上のように記述してスクリプトを読み込ませます。

<BODY onload="blink('blinkie',800);blinkBlock('blinkelement',500);">

スクリプトは<BODY>のonload属性で実行します。最初のパラメータが指定したID名で、2番目のパラメータが処理タイミング(ミリ秒)となります。

文字だけ点滅させるのであればblinkを、要素自体を点滅させるのであればblinkBlockを呼び出してください。