Open MagicVox.net
HTML 要素に周囲がぼやっと発光しているような視覚効果であるグロー効果(glow effect)を付与するための JavaScript を作ってみました。
Firefox 1.5.x, Netscape 7.1, Opera 9.1.0 で動作確認済みです。肝心の Internet Explorer では期待した通りの動作にならなかったので(誰か対応して！)スクリプト側では処理を行なう前にリターンしています。下の動作サンプルは IE 以外でお試しください。
スクリプト本体(makeGlow.js)を読み込み、グロー効果を付与するための関数を呼び出します。
// 特定のオブジェクトに対してグロー効果を付与する
makeGlowElement (document.getElementById ('id_name'));
// または指定されたクラス名を持つ全てのオブジェクトにグロー効果を付与する
makeGlowClass ('class_name');
これらの関数が呼ばれると、グラデーション画像を背景とする幾つかの span 要素を生成し、指定された HTML 要素の子として付け加えることでこれを実現しています。グラデーション画像のファイル名は固定ですが、画像ファイルへのパスと各画像のサイズは任意に変更することができます。
// グラデーション画像は /image/glow ディレクトリに配置されている
// グラデーション画像の基本サイズは 12 ピクセルとする
makeGlowClass ('class_name', '/image/glow', '12px');
スクリプトファイルは LGPL に従って自由に配布・改造することができます。
English