Changing and Moving Pictures with CSS
(Page 1 of 4 )
There are a number of ways you can incorporate images into your web site. If you're adding them to make your web site more dynamic, you probably want to venture beyond images that just sit there all the time. In this article, you'll learn how to make your pictures do something, with a little help from CSS, JavaScript, and HTML.
You might have seen web page images where the pictures are changing. For example you might be looking at an image on a web page, and after a while the image changes; you may see one or more pictures again in the same area before you see the initial picture, rather like a slide show. You may also have seen moving pictures (a video clip) on a particular area of a web page.
In this article I refer to the first phenomenon as Changing Pictures and the second phenomenon as Moving Pictures. If you want these effects for your web page, you can either obtain (buy) software to produce images with these effects, or you can do it yourself using CSS, JavaScript and HTML. I show you how to produce both effects, yourself, in this article.
Basically, you put images of the different pictures you want to be seen on a particular area of the web page (see how below). One image will be in front and the others will be behind it in order. If the images remain in their positions while the web page is opened, you should only see the image that is in front. Images placed like this are said to be in layers. Next, we will include a JavaScript function that displaces the images; it takes the one in front and moves it to the back, then the second one takes the position of the first, the third one takes the position of the second, and so forth. The process cycles through the images.
In order to properly understand this article, it is good for you to see each process in action.
Changing Pictures Demonstration
Copy the following code into a text editor and save the result as an HTML file in a directory. The pictures for this demonstration are attached: they are called books.gif, girls.gif, children.gif and animal.gif. They all deal with education. Download and save the pictures in the same directory as the file above. Open the file with a browser and you should see the pictures changing in one area.
<html>
<head>
<style type="text/css">
body {position:relative; z-index:0}
td#Pics {width:250px; height:300px; vertical-align:top}
img#books {position:absolute; border:0px; width:250px; height:300px; z-
index:2}
img#girls {position:absolute; border:0px; width:250px; height:300px; z-index:1}
img#children {position:absolute; border:0px; width:250px; height:300px; z-
index:1}
img#animal {position:absolute; border:0px; width:250px; height:300px; z-
index:1}
</style>
<script type="text/javascript">
var A=2;
var B=1;
var C=1;
var D=1;
var Temp;
function beChanging()
{
Temp=D; D=C; C=B; B=A; A=Temp;
document.getElementById('books').style.zIndex = A;
document.getElementById('girls').style.zIndex = B;
document.getElementById('children').style.zIndex = C;
document.getElementById('animal').style.zIndex = D;
setTimeout("beChanging()",1000);
}
</script>
</head>
<body onload="beChanging()">
<p>A paragraph may go here. A paragraph may go here. A paragraph may go here. A paragraph may go here.<br />
A paragraph may go here. A paragraph may go here. A paragraph may go here. A paragraph may go here.<br /></p>
<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="books.gif" usemap ="#MP" id="books">
<img src="girls.gif" usemap ="#MS" id="girls">
<img src="children.gif" usemap ="#MF" id="children">
<img src="animal.gif" usemap ="#MM" id="animal">
</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: Moving Pictures Demonstration >>
More HTML Articles
More By Chrysanthus Forcha
/ 8 
