Home arrow HTML arrow 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
(Page 1 of 4 )

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.



<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-

img#girls {position:absolute; border:0px; width:250px; height:300px; z-index:1}

img#children {position:absolute; border:0px; width:250px; height:300px; z-

img#animal {position:absolute; border:0px; width:250px; height:300px; z-



<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;






<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">



<td width="100">Some content can go in the first cell.


<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>Some content can go in the third cell.





<p>Some content can go below the table. </p>



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-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials