dcsimg
Login | Register   
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX

By submitting your information, you agree that devx.com may send you DevX offers via email, phone and text message, as well as email offers about other products and services that DevX believes may be of interest to you. DevX will process your information in accordance with the Quinstreet Privacy Policy.


Tip of the Day
Language: Java, Web
Expertise: Beginner
Aug 20, 1998

WEBINAR:

On-Demand

Application Security Testing: An Integral Part of DevOps


Animating Images with JavaScript

Animating between a number of images is fairly easy to do and works in Netscape Navigator 3.0+ and Internet Explorer 4.0+. Put the URLs of the images you'd like to show into an array and create a variable to store your current place in that array. Once the user clicks on the link to start the animation use the setTimeout command to call your routine at regular intervals and display the next image. The following code shows you how to use the setTimeout command to switch among a number of images in an array.

 
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
   var imageArray = new Array("squares.gif", "circles.gif",
    "diamonds.gif");
   var currentImage = 0;
   var timerId;

   function showImage() {
      currentImage++;
      if (currentImage > 2) {
         currentImage = 0;
      }
      document.images[0].src = imageArray[currentImage];
      timerId = setTimeout("showImage()", 2000);
   }
</SCRIPT>
</HEAD>

<BODY>
<A HREF="javascript:showImage()">Animate Image</A><BR><BR>
<IMG SRC="squares.gif">
</BODY>
</HTML>

One caveat: Because we are not pre-loading the images in the animation for this simple solution, you need to make sure that the interval between the images (2000 milliseconds in the example) is enough time to load each frame. Otherwise the browser might switch to the next frame before the one being displayed is fully downloaded.

Boris Feldman
 
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
×
We have made updates to our Privacy Policy to reflect the implementation of the General Data Protection Regulation.
Thanks for your registration, follow us on our social networks to keep up-to-date