Today is . Page created 07/08/07

Image       Image Animator Image Animation

Vertical Line Divider

This script should enable those who do not have any [ expensive imaging software ] to put up an animated effect on their web pages. What this script does is to load 2 or more different images one after the other to give the effect of them being a single animated image. All that is required are different images of the same size to be made and the script modifed accordingly. As many images as possible can be incorporated in the script. The time taken for the images to change can also be adjusted to make the images rotate faster or slower as per the requirements.

We have tested the code in IE 7.0, Firefox 2.0.0.4, Opera 9.21, Netscape 9.0b1, Netscape 8.1.3, AOL Explorer 1.5 and Safari 3.0.2. This script worked well in all platforms with no variations observed.

Depending on your knowledge of HTML and javascripts, this is an easy two (2) part copy and paste code that goes in both the <HEAD> section (reconfigurations apply) and <BODY> section (reconfigurations apply) (wherever you want this effect to appear) of your document.

<---- Default <HEAD> Section ---->


<script language="JavaScript" type="text/javascript">
<!-- Copyright 2001, Sandeep Gangadharan -->
<!-- For more free scripts go to http://www.sivamdesign.com/scripts/ -->
<!--
var animate=0;
function runBanner() {
var photos=new Array()
photos[0]="img1.gif" // change the name of the images at the left
photos[1]="img2.gif" // you can add as many images as you want to this array
photos[2]="img3.gif"



load=new Image(200,60); // change the #s at the left to match the size of your images
load.src="img1.gif";
load.src="img2.gif";
load.src="img3.gif";


if (photos.length > 0) {
document.getElementById('banner').src=photos[animate];
animate++;
if (animate==3) animate=0; // change the # 3 at the left to the maximum # of images you want included in your animation
window.setTimeout("runBanner()", 2000); } // change the # on the left to adjust the speed of the
} // animation. The smaller the # the faster the speed
window.onload=runBanner;
//-->
</script>

<---- Reconfigured <HEAD> Section ---->
<---- More Than Default Number (3) Of Images ---->

<script language="JavaScript" type="text/javascript">
<!-- Copyright 2001, Sandeep Gangadharan -->
<!-- For more free scripts go to http://www.sivamdesign.com/scripts/ -->
<!--
var animate=0;
function runBanner() {
var photos=new Array()
photos[0]="images1/image1.gif" // change the name of the images at the left
photos[1]="images1/image2.gif" // you can add as many images as you want to this array
photos[2]="images1/image3.gif"
photos[3]="images1/image4.gif"

load=new Image(200,60); // change the #s at the left to match the size of your images
load.src="img1.gif";
load.src="img2.gif";
load.src="img3.gif";
load.src="img4.gif";

if (photos.length > 0) {
document.getElementById('banner').src=photos[animate];
animate++;
if (animate==4) animate=0; // change the # 3 at the left to the maximum # of images you want included in your animation
window.setTimeout("runBanner()", 2000); } // change the # on the left to adjust the speed of the
} // animation. The smaller the # the faster the speed
window.onload=runBanner;
//-->
</script>

Notice     In the above reconfigurations just follow the pattern to add more than the default.

Once all the above has been completed, now paste the <BODY> section of code anywhere you want it to appear and make a few reconfigurations. See below where and howto.

<---- Default <BODY> Section ---->

<form name="imgs">
<a href="http://www.sivamdesign.com/scripts/"target="_blank"><img src="Path To Image1" border="0" width="200" height="60" id="banner"></a>
</form> <!-- change the URL in the <a> tag above to match your requirement -->

<---- With Removal Of URL Tag ---->

<form name="imgs">
<img src="Path To Image1" border="0" width="200" height="60" id="banner">
</form> <!-- change the URL in the <a> tag above to match your requirement -->

 Vertical Line Divider

In regards to the code on the left, we will cover the different reconfigurations that can be made in this section.

  • <img src="Path To Image1"     This is the first image that will load and appear once the page is open.
    (Refer back to the <HEAD> section to see what we are explaining).
  • width="200"     This refers to the width (from side to side) All* the images are.
    * All images have to be same size. Refer again to <HEAD> section to see where and howto. This setting must be the same as the one in the <HEAD> section.
  • target="_blank"     This attribute will cause the link associated with the images to open in a new browser window. You can either add it, leave it as default without it and or remove the link completely.
  • <a href="http://www.sivamdesign.com/scripts/">     If you do not want a link associated with this effect just remove this section.
  • Don't forget to remove the </a> tag after the image.

Horizontal Line Divider

Warning Logo     Note Of Importance:     On the page you are going to have this effect on or any page that will link to the page with this effect, be sure of one thing within either the linking URL or the URL this effect is on. Do Not have the backslash-forward slash / (whichever you call it) at the end of the URL or linked to URL. If you do, the effect Will Not Work!. If this sounds confusing, see the below example:

S elect the links above to see what we are explaining about the Right and Wrong URL address.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Rate This Page ]   Digg It!
[ Get Code Here ] When page opens scroll down to "Image Animator".