Gradient
Gradientフィルタ(グラデーション効果)の書式
- (HTML)<ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.Gradient(オプション属性)">
- (Scripting)
object.style.filter ="progid:DXImageTransform.Microsoft.Gradient(オプション属性)"
;
object.filters.item('DXImageTransform.Microsoft.Gradient').startColorstr=色値;
- (オプション属性)
startColorstr=色値 ・・・上部の色を指定
endColorstr=色値 ・・・下部の色を指定
enabled = ・・・1,true(フィルタを有効にする、デフォルト)/0,false(無効にする)
、通常は省略する
Sample Source......................................................................>>>
<script language="JavaScript">
<!--
function Start(c){
dv.filters.item('DXImageTransform.Microsoft.Gradient').startColorstr=c;
}
function End(c){
dv.filters.item('DXImageTransform.Microsoft.gradient').endColorstr=c;
}
// -->
</script>
</head>
<body>
<div id="dv" style="position:absolute; left:84px; top:38px; width:332px; height:109px;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='black',endColorstr='yellowgreen')">
<span style="position:relative;left:40;top:30;width:250;color:red;
font:40 'Arial Black';text-align:center;
filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='white',endColorstr='blue')">
Gradient
</span>
</div>
<form name="form1">外枠の色を変更できます
上部を
<select onchange="Start(this.value)">
<option value="black" selected>黒</option>
<option value="navy">紺</option>
<option value="blue">青</option>
<option value="green">緑</option>
<option value="yellow">黄</option>
<option value="tomato">トマト</option>
<option value="pink">ピンク</option>
<option value="magenta">紫</option>
<option value="red">赤</option>
<option value="brown">ブラウン</option>
<option value="white">白</option>
</select>色に、
下部を
<select onchange="End(this.value)">
<option value="black" selected>黒</option>
<option value="navy">紺</option>
<option value="blue">青</option>
<option value="green">緑</option>
<option value="yellow">黄</option>
<option value="tomato">トマト</option>
<option value="pink">ピンク</option>
<option value="magenta">紫</option>
<option value="red">赤</option>
<option value="brown">ブラウン</option>
<option value="white">白</option>
</select>色に
</form>