Changing and Moving Pictures with CSS - CSS Properties to Use
(Page 3 of 4 )
While you are placing elements in your HTML file in the normal flow, place the first image you want for the layers, where you want the layers to be. Give this image the position property with an absolute value in your CSS. Do not give the left and top properties to the image.
Place the next image for the layers immediately after the above one in the normal flow in your HTML file. Give this second image the same CSS properties (absolute position, no left and no top properties) as you did for the first one. Continue in this way for the rest of the images you want for the layers. With these CSS conditions you will have layers of images. The first one that you placed in the normal flow will appear in front. The rest will be behind this first one in the order they were placed in the normal flow.
You can make any of these images appear in front; you can make any of them appear behind the first; you can decide the order in which they will be displayed. You do this using the CSS z-index property. Any element can have the z-index property.
The z-index value is an integer. With layers, the image (element) with the highest z-index value appears first (in front), the one with the next higher value appears behind the first; the one with the third higher value appears next, and so on. In other words, if every image in the layers is given a z-index property (integer), then the order in which the images were placed in the normal flow is nullified (ignored). I usually give the BODY element a z-index value of zero and the elements (images) in the layers receive z-index values above zero.
When an element (image) has the absolute position property, it either appears in front of or behind the elements in the normal flow, depending on the z-index values. It does not occupy any area space in the normal flow. However, you can make it (or rather its left-top corner) appear in a particular point on the web page, by placing it in the normal flow and "deliberately" omitting its CSS Left and Top properties (as I indicated above).
Special Functions to Use
Images in layers are said to be in a stack. So each image has a position in the stack. The one with the highest z-index value appears in front and you can say it takes the first position in the stack. You change the images continuously on the web page by changing the positions of the images in the stack. For any image that you want to appear in front, just give it the highest z-index value; give the image that you want to leave the front a lower index value. The following code segment does this for both examples.
function beChanging()
{
// displace each of the images in the stack by one position (difference of 1 unit)
setTimeout("beChanging()",1000);
}
The setTimeout is a DOM function that JavaScript uses. In our examples, the first parameter of the function is a call to a function. The function we have called is beChanging() which contains this setTimeout function. The second parameter in the setTimeout function gives the amount of time the setTimeout function has to wait before it calls the function quoted in its first parameter.
The setTimeout function on its own will call the function quoted in its first parameter once. However, since the setTimeout function in this case calls a function, which contains the setTimeout function, we end up with an infinite loop. In this infinite loop, our function beChanging() keeps calling itself.
Note: While this infinite loop is being executed on the web page, other events from the web page can be called.
Next: Algorithm >>
More HTML Articles
More By Chrysanthus Forcha
/ 11 
