<html>
<head>
<title>Test: Css Animation Masks</title>
<style type="text/css">
html, body { background: white; color: black; }
img { border: 0 solid; background: url(im1/test_css_anim_1-2.jpg); background-position: 0 0; }
dt { font-weight: bold; }
dd { margin-bottom: 1em; }
</style>
<script type="text/javascript" defer="defer">
// <!--
var theImg1=null,theImg2=null,theImg1Style=null,theImg2Style=null,theLoop=null,theYCoord=0;
function MoveBackground(strTo){
	theImg1Style["backgroundPosition"]=theImg1Style["background-position"]=theImg2Style["backgroundPosition"]=theImg2Style["background-position"]=strTo;
}
function SwitchBackground(strTo){
	theImg1Style["background"]=theImg1Style["background-image"]=theImg2Style["background"]=theImg2Style["background-image"]=strTo;
}
function AnimationLoop(){
	theYCoord++;
	if(theYCoord==301){theYCoord=0}
	MoveBackground("0px "+theYCoord+"px");
}
function Animate() {
	if((theImg1)&&(theImg1.style)&&(theImg2)&&(theImg2.style)){
  	theImg1Style=theImg1.style;
  	theImg2Style=theImg2.style;
  	theYCoord=0;
  	theLoop=window.setInterval(AnimationLoop,60);
	}else{
		window.status=("CSS Animation Test will fail: Image elements not found.");
	}
}
function gr(){SwitchBackground("url(im1/test_css_anim_3-4.jpg)")}
function bn(){SwitchBackground("url(im1/test_css_anim_1-2.jpg)")}
function ci(){SwitchBackground("url(im1/test_css_anim_5.png)")}
function CatchHovers() {
 if((theImg1)&&(theImg2)) {
	theImg1.onmouseover=gr;
	theImg1.onmousedown=ci;
	theImg1.onmouseout=bn;
	theImg2.onmouseover=gr;
	theImg2.onmousedown=ci;	
	theImg2.onmouseout=bn;
 }
}
function Main() {
 if((window)&&(window.setInterval)&&(document)&&(document.getElementById)){
  	theImg1=document.getElementById("img1");
  	theImg2=document.getElementById("img2");
		Animate();
		CatchHovers();
 }else{
	window.status=("This CSS Animation Test won't work because your browser doesn't expose the required DOM abilities.");
 }
}
// -->
</script>
</head>
<body onload="Main()">
<h1>Test: Css Animation Masks</h1>
<dl><dt>Slanted</dt>
<dd><img id="img1" src="im1/test_css_anim_1-2.gif" /></dd>
<dt>Boxed</dt>
<dd><img id="img2" src="im1/test_css_anim_3.png" /></dd>
<dt>Objective</dt>
<dd>To show masked animations.</dd>
<dt>Description</dt>
<dd>The upper animation (named "Slanted") should show two numbers (1 and 2) with a line in between them, going horizontally to the right from the upper left corner above the 1, then in a 45 degree angle down in between the numbers, and once beneath the 2, horizontally to the lower right corner. The lower animation (named "Boxed") should show a red number 3 with a thick border. Both the slanted line in the upper animation and the border in the lower animation should show the same moving image. The upper animation should show the moving image quite clearly, while the lower animation should show a rather cloudy rendering of the same image.</dd>
<dt>Used technology</dt>
<dd>HTML, CSS, Ecmascript (Javascript), 1-bits transparancy, 24-bits (alpha) transparancy.</dd>
<dt>Possible use</dt>
<dd>Progress bars, logos, eye-catchers, buttons, etc.</dd>
<dt>Advantages</dt>
<dd><ul><li>Any shape possible;</li><li>Probably smaller file-sizes than gif animation;</li><li>Works in any graphics, css and dom-capable browser.</li></ul></dd>
<dt>Disadvantages</dt>
<dd><ul><li>No animation without dom-capability;</li><li>May become annoying when used too much;</li><li>MSIE6 doesn't natively support 24-bit transparancy.</li></ul></dd>
<dt>CSS coding</dt>
<dd><tt>img { <br />border: 0 solid; <br />background: url(1-2.jpg); <br />background-position: 0 0; <br />}</tt></dd>
<dt>Ecmascript coding</dt>
<dd><tt>theYCoord++;<br />
if (theYCoord == 300) { theYCoord = 0 }<br />
theImg["backgroundPosition"] = "0px " + theYCoord + "px";</tt></dd>
</dl>
<address>A.E.Veltstra<br />2007-03-26</address>
<p><a href="./" title="Up to the Programming chapter">Index</a></p>
<!-- preloading -->
<img border="0" alt="" title="" height="1" width="1" src="im1/test_css_anim_3-4.jpg" /><img border="0" alt="" title="" height="1" width="1" src="im1/test_css_anim_5.png" />
</body></html>�