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

DropShadow フイルタ

各オプションを指定して[DropDhadow]ボタンをクリック

影の色

正の値は右方向にオフセットされ、
負の値は左方向にオフセットされる

    X軸方向の影のオフセット(ピクセル単位)
正の値は下方向にオフセットされ、
負の値は上方向にオフセットされる

    Y軸方向の影のオフセット(ピクセル単位)
影の落ち方

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)