DropShadow フイルタ
各オプションを指定して[DropDhadow]ボタンをクリック
影の色 ★正の値は右方向にオフセットされ、 |
各オプションを指定して[DropDhadow]ボタンをクリック
影の色 ★正の値は右方向にオフセットされ、 |
Sample Source......................................................................>>>
<script language="JavaScript"><!--
function DropShadowGo(){
var c = col.value; //色を取得
var x = ofx.value; //X軸方向の影のオフセット値を取得
var y = ofy.value; //Y軸方向の影のオフセット値を取得
var p = pos.value; //影の落ち方を<0/1>から取得
var str = "<img id='pic' src='../../images/cut/025.gif'
width='103' height='116'";
str += " style='filter:dropshadow(color="
+ c + ",offx="
+ x + ",offy=" + y +
",positive=" + p + ")'>";
pp.innerHTML = str;
}
//--></script>
</head>
<body>
<button onclick="DropShadowGo();">DropShadow</button>
<p>影の色 <select name="col" size="1">
<option value="red" selected>赤 </option>
<option value="blue">青 </option>
<option value="green">緑 </option>
<option value="magenta">紫 </option>
<option value="pink">ピンク </option>
<option value="gray">灰色 </option>
<option value="coral">オレンジ </option>
<option value="black">黒 </option>
</select></p>
<p>X軸方向の影のオフセット
<input style="color:red;font:12pt;text-align:center"
type="text" name="ofx"
value="5" size="4">
Y軸方向の影のオフセット
<input style="color:red;font:12pt;text-align:center"
type="text" name="ofy"
value="5" size="4">
影の落ち方<select name="pos" size="1">
<option value="1" selected>透明な部分に影を作る</option>
<option value="0">不透明な部分に影を作る</option>
</select>
</p>
<p id="pp">
<img id="pic" src="../../images/cut/025.gif"
WIDTH="103"HEIGHT="116">
</p>
end(最終更新:12/11/10)