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

フィルタ一覧

X-Ray Grayscale Invert(色反転)
FlipH(左右反転) FlipV(上下反転) DropShadow
Shadow Glow Lights(光源)
Alpha(透明度) Wave(波動） Motion Blur(ぶれ)
Chromakey Mask 　

上記のフイルタ名をクリックすれば、下の文字に適用される。

DHTMLFilter

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

<script language="JavaScript"><!--
    function MoOver(i){     //mouseがｾﾙ内に入った時
        n = i;
        if(n == 01){
            TD01.style.background = "skyblue";
            TD01.style.color = "red";}
        if(n == 02){
            TD02.style.background = "skyblue";
            TD02.style.color = "red";}
        ･･･（以下省略）･･･
        if(n == 14){
            TD14.style.background = "skyblue";
            TD14.style.color = "red";}
    }
    function MoClick(i){    //ｾﾙ内をｸﾘｯｸした時
        n = i;
        if(n == 01){
            D1.style.filter = "xray()";}
        if(n == 02){
            D1.style.filter = "Gray()";}
        if(n == 03){
            D1.style.filter = "Invert()";}
        if(n == 04){
            D1.style.filter = "FlipH()";}
        if(n == 05){
            D1.style.filter = "FlipV()";}
        if(n == 06){
            D1.style.filter = "dropShadow(color=#000000
                ,offx=-15,offy=-10,positive=1)";}
        if(n == 07){
            D1.style.filter = "Shadow(Color='gray'
                ,Direction=135,enabled=1)";}
        if(n == 08){
            D1.style.filter = "glow(color='pink',strength=20)";}
        if(n == 09){
D1.style.filter = "light()";}
        D1.filters.item(0).addAmbient(100,250,0,200);}
        if(n == 10){
            D1.style.filter = "Alpha(Opacity=40,style=2)";}
        if(n == 11){
            D1.style.filter = "Wave(Add=0,Freq=3,LightStrength=70
                ,Phase=0,Strength=2,enabled=1)";}
        if(n == 12){
            D1.style.filter = "Blur(Add=1,Direction=45,Strength=5)";}
        if(n == 13){
            D1.style.filter = "chroma(color='blue')";}
        if(n == 14){
            D1.style.filter = "Mask(Color=#000000)";}
    }
    function MoOut(i){
        n = i;
        if(n == 01){
            D1.style.filter = "nothing";
            TD01.style.background = "white";
            TD01.style.color = "black";}
        if(n == 02){
            D1.style.filter = "nothing";
            TD02.style.background = "white";
            TD02.style.color = "black";}
        ･･･（以下省略）･･･
        if(n == 14){
            D1.style.filter = "nothing";
            TD14.style.background = "white";
            TD14.style.color = "black";}
    }
//--></script>
</head>

<body>
<table>
<tr>
  <td id="TD01" onmouseover="MoOver(01);"
    onclick="MoClick(01);" onmouseout="MoOut(01);">X-Ray</td>
  <td id="TD02" onmouseover="MoOver(02);"
    onclick="MoClick(02);" onmouseout="MoOut(02);">Grayscale</td>
    ･･･（以下省略）･･･
  <td id="TD14" onmouseover="MoOver(14);"
    onclick="MoClick(14);" onmouseout="MoOut(14);">Mask</td>
</tr>
</table>

<div ID="D1" STYLE="font-size:28pt;color:blue;width:50%" align="center">
Koda<font color="#008000">yan Home</font>page！
</div>

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