Home arrow HTML arrow Page 3 - Changing and Moving Pictures with CSS

Changing and Moving Pictures with CSS

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.

Author Info:
By: Chrysanthus Forcha
Rating: 4 stars4 stars4 stars4 stars4 stars / 62
June 09, 2008
  1. · Changing and Moving Pictures with CSS
  2. · Moving Pictures Demonstration
  3. · CSS Properties to Use
  4. · Algorithm

print this article

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)




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.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials