以前作成したグラデーションの改良版です。
改良したソースはこちら。
上のグラデーション文字列はどれもJavaScriptを使って表示しています。
今回の改良ポイントは文字列をstylesheetで修飾できるようにしたこと。
他に、
位置やサイズを簡単に指定できるようになりました。
これまではIEは問題なかったのですが、NNは大問題で文字が表示されませんでした。
というのは、NNが<div> </div>で囲まれた部分をレイヤーとして扱うため、
document.write()だけでは不十分だったからなのです。
解決策
ではどうしたかというと、thisを使いました。
thisは文字通り、このを意味していますが(意味不明)、
使い慣れると便利なものです。
ここでは、文字を書き込みたいdocumentをthis.documentで関数に渡しています。
呼び出し側を、
<div class="test2">
<script>
<!--
gradstr("グラデーション文字列","AA00AA","00AAAA",this.document)
//-->
</script>
</div>
<div class="test">
<script>
<!--
gradstr("グラデーション文字列","FF00FF","00FFFF",this.document)
//-->
</script>
</div>
関数側を、
function gradstr(str,start,end,document)
とすることで、NNの場合 thisにはdocument.layers[num]が割り振られるため、
書き出したいdocumentが変わっているわけです。
ちなみにStyleSheetの設定は、
<style type="text/css">
<!--
.test{position:absolute;top:108;left:0;font-size:26pt;text-align:center;width:100%;font-weight:bold}
.test2{position:absolute;top:111;left:3;font-size:26pt;text-align:center;width:100%;font-weight:bold}
-->
</style>
となっています。
気に入ったら使ってみてね。