Animated GIFs vs JavaScript image swapping

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?
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jan LouwerensSoftware EngineerCommented:
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
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 ..
stupidlinzAuthor Commented:
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.
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

Animated gifs are "programmed" with a gif animator.  You can go to 
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.
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.

stupidlinzAuthor Commented:
already know this...

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.