HOME  >>>  HTML整理ノート  >>> DHTML -- 基本編   応用編

IE5.5以降のShadowフィルタ

 Shadow

 

 

 

 

 

 

オプション属性を変更すると...


Shadowフィルタの書式(IE5.5以降)

Sample Source......................................................................>>>

<script language="JavaScript"><!--
c = "gray"; //オプションcolorの初期値
d = 135; //オプションdirectionの初期値
s = 10; //オプションstrengthの初期値
function ChangeShadow(){  dv.style.filter =   "progid:DXImageTransform.Microsoft.Shadow(color="+c+",direction="+d+",Strength="+s+")";
}
//--></script>
</head>
<body>
<div id="dv" style="position:absolute;filter:progid:DXImageTransform.Microsoft
   .Shadow(color=gray,direction=135,strength=10)
">  <img src="../../java/jadata/ja02a.jpg" width="200" height="150">  <img src="../../images/cut/025.gif" width="103" height="116">  <span style="color:green;font:60">Shadow</span> </div>
<form name="form1">
影の色を
<select onChange="c=this.value;ChangeShadow();">
<option value="gray" selected>グレー</option>
<option value="black">黒</option>
<option value="blue">青</option>
<option value="green">緑</option>
<option value="yellow">黄</option>
<option value="pink">ピンク</option>
<option value="brown">ブラウン</option>
<option value="aqua">水色</option>
</select>に、
影の方向を
<select onChange="d=this.value;ChangeShadow();">
<option value="0">真上</option>
<option value="45">右上</option>
<option value="90">右</option>
<option value="135" selected>右下</option>
<option value="180">真下</option>
<option value="225">左下</option>
<option value="270">左</option>
<option value="315">左上</option>
</select>に、
影の大きさを
<select onChange="s=this.value;ChangeShadow();">
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="8">8</option>
<option value="10" selected>10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="40">40</option>
</select>ピクセルに
Shadowフィルタを<input type="button" value="解除" onclick="dv.style.filter='';">する
</form>

end(最終更新:12/11/10)