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

Alphaフィルタで2色グラデーション

① opacity=100,finishOpacity=0
startX=0,startY=0,finishX=60,finishY=100　

　

② opacity=0,finishOpacity=100
startX=40,startY=0,finishX=100,finishY=100

　

上の①,②を重ねると--→　

　

★色を と とに

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

<script language="JavaScript">
<!--
function Change(c1,c2){
  dv1.style.backgroundColor = c1;
  dv2.style.backgroundColor = c2;
  dv3.style.backgroundColor = c1;
  dv4.style.backgroundColor = c2;
}
// -->
</script>
</head>
<body>
<div id="dv1" style="position:absolute; left:300px; top:45px; 
    width:200px; height:50px;background-color:#FF0000;
    filter:Alpha(style=1,opacity=100,startX=0,startY=0,
　　　　　finishX=60,finishY=100,finishOpacity=0)"></div>
<div id="dv2" style="position:absolute; left:300px; top:113px; 
    width:200px; height:50px; background-color:#00FF00;
    filter:Alpha(style=1,opacity=0,startX=40,startY=0,
　　　　　finishX=100,finishY=100,finishOpacity=100)"></div>
<div id="dv3" style="position:absolute; left:300px; top:190px; 
    width:200px; height:50px; z-index:1; background-color:#FF0000;
   filter:Alpha(style=1,opacity=100,startX=0,startY=0,
　　　　　finishX=60,finishY=100,finishOpacity=0)"></div>
<div id="dv4" style="position:absolute; left:300px; top:190px; 
    width:200px; height:50px; z-index:2; background-color:#00FF00;
    filter:Alpha(style=1,opacity=0,startX=40,startY=0,
　　　　　finishX=100,finishY=100,finishOpacity=100)"></div>

<form name="form1">
  ★色を 
  <select name="color1">
    <option value="black">黒</option>    
    <option value="gray">ｸﾞﾚｰ</option>
    <option value="blue">青</option>
    <option value="aqua">水</option>
    <option value="green">緑</option>
    <option value="yellow">黄</option>
    <option value="brown">ﾌﾞﾗｳﾝ</option>
    <option value="pink">ﾋﾟﾝｸ</option>
    <option value="magenta">紫</option>
    <option value="red">赤</option>
  </select>
  と
  <select name="color2">
    <option value="black">黒</option>
    <option value="gray">ｸﾞﾚｰ</option>
    <option value="blue">青</option>
    <option value="aqua">水</option>
    <option value="green">緑</option>
    <option value="yellow">黄</option>
    <option value="brown">ﾌﾞﾗｳﾝ</option>
    <option value="pink">ﾋﾟﾝｸ</option>
    <option value="magenta">紫</option>
    <option value="red">赤</option>
  </select>
  とに
  <input type="button" value="変える" 
　　onclick="Change(this.form.color1.value,this.form.color2.value)">
</form>

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