[JavaScript] グロー効果

Posted by
ぴろり
Posted at
2007/01/19 12:53
Trackbacks
関連記事 (0)
Post Comment
コメントできます
Category
開発メモ カテゴリ

 HTML 要素に周囲がぼやっと発光しているような視覚効果であるグロー効果(glow effect)を付与するための JavaScript を作ってみました。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

スクリ−ンショット

 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 に従って自由に配布・改造することができます。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  



関連記事/トラックバック

関連記事/トラックバックはまだありません

この記事にトラックバックを送るには?

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。