Changing and Moving Pictures with CSS - Moving Pictures Demonstration
(Page 2 of 4 )
In this example a ball keeps moving through an arc. Copy the following code in to a text editor and save the result as an HTML file in a directory. The pictures for this demonstration are attached: they are called, ball1.gif, ball2.gif, ball3.gif, ball4.gif, ball5.gif, ball6.gif, ball7.gif, ball8.gif, ball9.gif. You can find the images in the last section of this article.
The images are in order and each one shows the ball in a slightly different position from the previous one. Download and save the pictures in the same directory as the file above. Open the file with a browser and you should see the ball moving through an arc repeatedly.
<html>
<head>
<style type="text/css">
body {position:relative; z-index:0; background-color:maroon; color:white}
td#Pics {width:302px; height:233px; vertical-align:top}
img#ball1 {position:absolute; border:0px; z-index:2}
img#ball2 {position:absolute; border:0px; z-index:1}
img#ball3 {position:absolute; border:0px; z-index:1}
img#ball4 {position:absolute; border:0px; z-index:1}
img#ball5 {position:absolute; border:0px; z-index:1}
img#ball6 {position:absolute; border:0px; z-index:1}
img#ball7 {position:absolute; border:0px; z-index:1}
img#ball8 {position:absolute; border:0px; z-index:1}
img#ball9 {position:absolute; border:0px; z-index:1}
</style>
<script type="text/javascript">
var A=2;
var B=1;
var C=1;
var D=1;
var E=1;
var F=1;
var G=1;
var H=1;
var I=1;
var Temp;
function beChanging()
{
Temp=I; I=H; H=G; G=F; F=E; E=D; D=C; C=B; B=A; A=Temp;
document.getElementById('ball1').style.zIndex = A;
document.getElementById('ball2').style.zIndex = B;
document.getElementById('ball3').style.zIndex = C;
document.getElementById('ball4').style.zIndex = D;
document.getElementById('ball5').style.zIndex = E;
document.getElementById('ball6').style.zIndex = F;
document.getElementById('ball7').style.zIndex = G;
document.getElementById('ball8').style.zIndex = H;
document.getElementById('ball9').style.zIndex = I;
setTimeout("beChanging()",100);
}
</script>
</head>
<body onload="beChanging()">
<table cellpading="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="100">Some content can go in the first cell.
</td>
<td id="Pics">
<img src="ball1.gif" usemap ="#MP" id="ball1">
<img src="ball2.gif" usemap ="#MS" id="ball2">
<img src="ball3.gif" usemap ="#MF" id="ball3">
<img src="ball4.gif" usemap ="#MM" id="ball4">
<img src="ball5.gif" usemap ="#MP" id="ball5">
<img src="ball6.gif" usemap ="#MS" id="ball6">
<img src="ball7.gif" usemap ="#MF" id="ball7">
<img src="ball8.gif" usemap ="#MM" id="ball8">
<img src="ball9.gif" usemap ="#MM" id="ball9">
</td>
<td> Some content can go in the third cell.
</td>
</tr>
</tbody>
</table>
<p>Some content can go below the table. </p>
</body>
</html>
Next: CSS Properties to Use >>
More HTML Articles
More By Chrysanthus Forcha
/ 11 
