グラデーションをリアルタイムに変化させる

動作ブラウザ
Internet Explorer Netscape Navigator
4.0x 4.5 5.0x 5.5 6.0 4.x 6.0
Windows × - × × ×
Macintosh × × × - - × ×
UNIX - - - - - × ×

解  説  グラデーションをリアルタイムに変化させるにはDirectXフィルタのグラデーション機能を使い効果を反映させたいタグにスタイルシートで記述します。次にグラデーションの値を加算/減算など演算し16進数文字列に変換します。StartColorStrプロパティが開始色、EndColorStrプロパティが終了色となっています。代入する文字列はRRGGBBでなくAARRGGBB(AAはα値(透明度))となっていますので注意が必要です。
コード <html> <head> <title>グラデーションをリアルタイムに変化させる</title> <script language="JavaScript"><!-- startCol = 0; endCol = 0; function changeGrad() { startCol = (startCol + 8) & 0xFF; endCol = (endCol + 8) & 0xFF; str = "00000" + startCol.toString(16); sStr= "#FF" + str.substring(str.length-6,str.length); str = "0" + endCol.toString(16) + "0000"; eStr= "#FF" + str.substring(str.length-6,str.length); myIMG.filters[0].StartColorStr = sStr; // ← aaRRGGBB myIMG.filters[0].EndColorStr = eStr; // ← aaRRGGBB setTimeout("changeGrad()",200); } // --></script> </head> <body id="myIMG" onLoad="changeGrad()" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#FF000000, endColorstr=#FF000000)"> <font color="white">グラデーションをリアルタイムに変化させます。</font> </body> </html>

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!