alphaの応用
マウスを載せると赤色が変化します。
基本形
要素の中心がopacity値の、周辺部がfinishopacity値の透明度になる。
2つの＜div＞を重ね、それぞれにalphaを設定する。赤のサイズは少し小さくする。
2つの＜div＞を少しズラして配置。
こんなのはどうかな！
マウスを載せると赤色が変化します。
基本形
要素の中心がopacity値の、周辺部がfinishopacity値の透明度になる。
2つの＜div＞を重ね、それぞれにalphaを設定する。赤のサイズは少し小さくする。
2つの＜div＞を少しズラして配置。
こんなのはどうかな！
Sample Source......................................................................>>>
<script language="JavaScript"><!--
function BgColor(obj,c){
obj.style.backgroundColor = c;
}
<body>
<div style="width:250;height:80;float:left;
background-color:green;
filter:alpha(opacity=100,finishopacity=0,style=2)"
onmouseover="BgColor(this,'maroon');"
onmouseout="this.style.backgroundColor='green';"></div>
<div style="position:absolute;top:200;left:20;
width:250;height:80;background-color:green;
filter:alpha(opacity=100,finishopacity=0,style=2)"></div>
<div style="position:absolute;top:210;left:45;
width:200;height:60;background-color:red;
filter:alpha(opacity=80,finishopacity=0,style=2)"
onmouseover="BgColor(this,'aqua');"
onmouseout="this.style.backgroundColor='red';"></div>
<div style="position:absolute;top:300;left:20;
width:250;height:80;background-color:green;
filter:alpha(opacity=100,finishopacity=0,style=2)"></div>
<div style="position:absolute;top:300;left:70;
width:250;height:80;background-color:red;
filter:alpha(opacity=100,finishopacity=0,style=2)"
onmouseover="BgColor(this,'blue');"
onmouseout="this.style.backgroundColor='red';"></div>
<div style="position:absolute;top:450;left:20;
width:250;height:80;background-color:green;
filter:alpha(opacity=100,finishopacity=0,style=2)"></div>
<div style="position:absolute;top:390;left:95;
width:100;height:200;background-color:red;
filter:alpha(opacity=100,finishopacity=0,style=2)"
onmouseover="BgColor(this,'magenta');"
onmouseout="this.style.backgroundColor='red';"></div>
<div style="position:absolute;top:600;left:20;
width:250;height:80;background-color:green;
filter:alpha(opacity=100,finishopacity=0,style=3)"></div>
<div style="position:absolute;top:600;left:20;
width:250;height:80;background-color:red;
filter:alpha(opacity=100,finishopacity=0,style=2)"
onmouseover="BgColor(this,'yellow');"
onmouseout="this.style.backgroundColor='red';"></div>
end(最終更新:12/11/10)