WebDevelopersNotes logo

home-icon Home / Images & photos / Animated JPGS

Animated JPGS

Animated JPGs

We’ve all heard of animated gifs and most of us would have made some for our web sites. Such gifs can be created using many commercial and free programs.
The animated gifs are a series of images (frames) that are played sequentially giving the semblance of motion/change. The Gif89a gif format supports animation along with transparency.

The jpg image format has no provision for animation, however, with a little JavaScript and a dash of creativity, we can easily make an “animated” jpg.
You should keep in mind that the animated jpg is not one image but a series of images that are displayed in the same place in the browser.

Sponsored Links

We start by preloading all the jpg images required in the “animation”.

The second step is to use a function that changes the source of an image. Finally, we call this function repeatedly by employing the setTimeout() method.


var c = 1;

/* Preloading images */
var image1 = new Image();
image1.src = "a1.jpg";
var image2 = new Image();
image2.src = "a2.jpg";
var image3 = new Image();
image3.src = "a3.jpg";
var image4 = new Image();
image4.src = "a4.jpg";
var image5 = new Image();
image5.src = "a5.jpg";

function disp_img(w)
   {
   if (c == 6)
      {
      c = 1;
      }
   var img_src = "a" + c + ".jpg";
   document.ani.src = img_src;
   c++;
   }
t = setInterval("disp_img(c)", 1000);

The entire script is placed inside the HTML document HEAD section.
We start by initializing a global variable c that serves as a counter and is also a part of the image name. After preloading the images (an1.jpg, an2.jpg, an3.jpg, an4.jpg and an5.jpg), we define a function disp_img() that changes the source of images named ani. The function also checks the value of variable c, assigning it a value of 1 if its value exceeds 5. The variable is also incremented each time the function is called. The function is called after every 1 second (1000 milliseconds) with the setInterval() method.

You can customize the script and create .jpg slide-shows easily.

Click here to view the images and how the code works

Note: These “animated” jpgs will not work browsers that have JavaScript disabled.

Boutell.com offers an open source JPG animator written in Java called JpegAnim 1.0. I think it also works on the same principle that I have used here. You can get more information on this product on the Boutell.com JpegAnim web page.

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

The Information and Communication Technologies (ICT) sector is only a small 4% share of the GDP. But it accounts for 40% of all patents issued in the US. [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy