Alphaフィルタ（透明度）の利用を利用したバナー

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

全く同形の2枚のDIV要素を重ね、それぞれのAlphaフィルタのOpacity(透明度)を変化さす。

Wonderful !!

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

<style TYPE="text/css"><!--
 .style1  {position:absolute;width:300;text-align:center;
	    font:26pt "Arial Black";filter:alpha(opacity=100);}
--></style>

<script language="JavaScript"><!--
var timer1,timer2,timer3,timer4;
function Go1(){
  dv2.filters.alpha.opacity -= 2; //透明度を2上げる
  timer1 = setTimeout("Go1()",20);
  if(dv2.filters.alpha.opacity <= 1){
    clearTimeout(timer1);
    dv2.innerText = (dv2.innerText == "Wonderful !!")
		? "DynamicHTML" : "Wonderful !!";
    setTimeout("Go2()",20);
  }
}
function Go2(){
  dv1.filters.alpha.opacity -= 2; //透明度を2上げる
  timer2 = setTimeout("Go2()",20);
  if(dv1.filters.alpha.opacity <= 1){
    clearTimeout(timer2);
    dv1.innerText = (dv1.innerText == "Wonderful !!")
		? "DynamicHTML" : "Wonderful !!";
	setTimeout("Go3()",20);
  }
}
function Go3(){
  dv1.filters.alpha.opacity += 2; //透明度を2下げる
  timer3 = setTimeout("Go3()",20);
  if(dv1.filters.alpha.opacity >= 99){
    clearTimeout(timer3);
    setTimeout("Go4()",3000);
  }
}
function Go4(){
  dv2.filters.alpha.opacity += 2; //透明度を2下げる
  timer4 = setTimeout("Go4()",20);
  if(dv2.filters.alpha.opacity >= 99){
    clearTimeout(timer4);
    setTimeout("Go1()",3000);
  }
}
//--></script>
</head>

<body onload="Go1();">
<div id="dv1" class="style1"
	style="background-color:pink;color:blue;border:5px solid green">
	Wonderful !!</div>   
<div id="dv2" class="style1"
	style="background-color:skyblue;color:magenta;border:5px solid blue">
	Wonderful !!</div>

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