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

Filter一覧(no2)

選択ボックスでフィルタを選択すれば適用できます。その時の設定内容も表示される。 

025.gif (4385 バイト)

梅と鶯
FILTER

現在のfilter設定内容 (Filterの設定内容を表示)

★同時に複数のフィルタを適用できます。

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

<script language="JavaScript"><!--
function Fil(f){
    dv.style.filter=f;     //filterを適用
    fil.innerText = f;     //filter設定内容を表示
}

function Fil2(f){
    dv.style.filter=f;
    fil.innerText = f;   
}
//--></script>
</head>

<body>
<select onChange="Fil(this.value)">
  <option selected value>filter無し</option>
  <option value="xray()">xray(X線) </option>
  <option value="gray()">gray(グレー) </option>
  <option value="invert()">invert(色反転) </option>
  <option value="flipH()">flipH(左右反転) </option>
  <option value="flipV()">flipV(上下反転) </option>
  <option value="shadow(color=#63418B,direction=45)">
        shadow(陰影) </option>
  <option value="dropshadow(color=#6688A6,
        offX=10,offY=10,positive=1)
">dropshadow </option>
  <option value="glow(color=pink,strength=8)">
        glow(発光) </option>
  <option value="blur(add=1,direction=315,strength=8)">
        blur(ブレ) </option>
  <option value="wave(add=0,freq=4,lightstrength=80,
        phase=50,strength=6)
">wave(波動) </option>
  <option value="alpha(opacity=30)">alpha(透明度) </option>
  <option value="chroma(color=green)">Chromakey </option>
  <option value="mask(color=black)">黒色でmask </option>
</select>

<div id="dv" style="width:70%">
  <img style="float:left" id="pic"
    src="../../images/cut/025.gif" width="103" height="116">
  <span style="width:200;color:magenta;
    font:30pt 'DF勘亭流'">梅と鶯</span><br>
  <span id="sp" style="width:200;color:green;
    font:30pt 'Broadway BT'">FILTER</span>
</div>

<fieldset style="border:double blue;background-color:mistyrose;">
  <legend style="color:red;font:16;">現在のfilter設定内容</legend>
  <span id="fil">(Filterの設定内容を表示)</span>
</fieldset>

<p>★同時に複数のフィルターを適用できます。</p>
<select onChange="Fil2(this.value)">
  <option selected value>filter無し
  <option value="invert() glow(color=pink,strength=8)">
        invert(色反転)とglow(発光)
  <option value="shadow(color=#63418B,direction=45)
    wave(add=0,freq=4,lightstrength=80,phase=50,strength=6)
">
    shadow(陰影)とwave(波動)
  <option value="flipH() shadow(color=#63418B,direction=45)
    glow(color=pink,strength=8)
">上下反転と陰影と発光
  ・・・(他は省略)・・・
</select> </p>


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