Animated GIFs vs JavaScript image swapping

Posted on 2000-01-06
Medium Priority
Last Modified: 2013-11-19
What are the main differences between Animated GIFs and JavaScript image swapping for the delivery of simple images on the net? also which is best?
Question by:stupidlinz

Expert Comment

by:Jan Louwerens
ID: 2330730
animated gifs and javascript image swapping are two different concepts, and are not used for the same purpose. Animated gifs are just little animations that loop over and over, no matter what the user does. javascript image swapping is meant for user interaction, such that things on the screen change when user mouse over or click on certain sections of the screen

Expert Comment

ID: 2330852
Description of animated gif:
This is a *.gif file containing a special header specifying that there are multiple images inside the file, plus the intervals with which they should be swapped. Animated gifs can be viewed by a web browser or specialized application. Use these if there is no need to change anything when they're viewed.

Javascript image swapping:
This is a browser-only method. You have to create an array of filenames of several image files, and you let javascript swap them. This process is more processor-intensive and less preferable if no user interaction is needed. The javascript code gives you the liberty however to for example change the number of images shown, or to change the refresh rate.

so concluding: use animated gifs for banners, static buttons and backgrounds, and use javascript animation for rollover buttons, and other dynamic interface features such as short interactive movies and so on.

hope this helps ..

Author Comment

ID: 2331735
I really need to know more about how the two methods compare against each other, e.g. why you would choose one over the other. also something about how they are programmed.
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.


Expert Comment

ID: 2332843
Animated gifs are "programmed" with a gif animator.  You can go to http://www.tucows.com 
and download one if you want.

Javascript is a "script language", you write a script amd put it in your web page.

If you were more familiar with one of them you would probably choose it.  Javascript is a lot more powerful then gif animation.  An animated gif can only be used to display a sequence of images.  Javascript can be used to display images, execute programs, interact with the user, etc.

Expert Comment

ID: 2332977
What is the end use that this decision will help you with.  If its a simple animation use the animated gif.  if its for mouseovers and web based image swapping use javascript.  This would be navigational buttons and such.


Author Comment

ID: 2335987
already know this...

Accepted Solution

patrickm3 earned 150 total points
ID: 2338321

The original question was-
What are the main differences between Animated GIFs and
JavaScript image swapping for the delivery of simple images on the net? also which is best?

This has been answered properly by three people.  If you are looking for the javascript code for some image swapping, it varies on use and user.  Here is some code for navigation mouse overs-

<script language="JavaScript">

if (document.images){

  var navtv0 = new Image()
  navtv0.src = "images/graphics/popup.gif"
  var tvnav1r = new Image()
  tvnav1r.src = "images/graphics/muddpop.gif"
  var tvnav2r = new Image()
  tvnav2r.src = "images/graphics/kimpop.gif"
  var tvnav3r = new Image()
  tvnav3r.src = "images/graphics/yourpop.gif"
  var tvnav4r = new Image()
  tvnav4r.src = "images/graphics/townpop.gif"
  var tvnav5r = new Image()
  tvnav5r.src = "images/graphics/contpop.gif"
  var tvnav6r = new Image()
  tvnav6r.src = "images/graphics/archpop.gif"
  var tvnav7r = new Image()
  tvnav7r.src = "images/graphics/editpop.gif"


function msover(imgName) {
  if (document.images){
    document.images.navtv0.src = eval('tv' + imgName + 'r.src')

function msout(imgName) {
  if (document.images){
    document.images.navtv0.src = eval('navtv0' + '.src')

// -->


Just replace the gif image names with ones you want to use.  Also modify for the number of mouse overs you need.

So if you know all of this, then why post a question and not give anyone with

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

No other job is as rewarding and demanding as building an iPhone app is. It is not really in the hands of the developer for the success of an iPhone app. Many factors operate jointly for every iOS application's success in the market.
This article is about the challenges faced by Android app developers.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

601 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question