How to fade one image into another

The notes on this page provide guidance on two different ways to fade one image into another.

1. Using Filters - IE only
   One method of fading uses Filters. This method is very easy and simple to use but only work with Internet Explorer. Visitors with other types of browser will see the images but not the fade effect.
2. Using Opacity (i.e. transparency) - IE, Mozilla, Opera
   The second method changes the transparency of an image. This is more complex but works with a range of browsers.

Using Filters (IE only)

Filters provide an easy way of fading one image into another. The disadvantage is that are non-standard and only with with Internet Explorer.

The following example shows the effect. If you are using Internet Explorer then clicking on the "Image one" or "Image two" link will fade in the appropriate image. If you are using a browser other than Internet Explorer then you will see the image change but without any fade effect.

Image one

Image two

This example uses an image. This acts as a placeholder and must be given a unique id. The image above uses the following HTML:

<img alt="" id="emily1" src="emily03.jpg" width="201" height="201">

It then uses the following JavaScript, which defines a single "BlendImage" function which takes both the "id" of the image and the name of the image file to load:

<script type="text/javascript">
function BlendImage(id,image)
{
  var element = document.getElementById(id);
  if (element.filters)
  {
    element.style.filter="blendTrans(duration=1)";
    element.filters.blendTrans.Apply();
  }
  element.src = image;
  if (element.filters) element.filters.blendTrans.Play();
}
</script>

Finally the two links are configured to call the BlendImage function, and the HTML for them is as follows:

<a href="#self" onclick="BlendImage('emily1','emily01.jpg')">Image one</a><br>
<a href="#self" onclick="BlendImage('emily1','emily02.jpg')">Image two</a>

This technique is very simple and therefore easy to incorporate onto any webpage. However, it only works on Internet Explorer. This is because the transition effects that it makes use of were introduced by Microsoft and are non-standard and are not been supported by any other browser.

Using Opacity (IE, Mozilla or Safari)

An alternative approach is to change the opacity of an image. An image with an opacity of 0% is fully transparent (and thus not visible), and image with an opacity of 100% allows nothing to show through.

By changing the opacity an image can be made to appear to fade in or fade out:

This is great for fading an image in or out, but by itself does not fade one image into another.

The missing ingredient is a second image. By adding an image behind the image to be faded, and then changing the opacity of the foreground image from fully transparent (opacity 0%) to solid (opacity 100%) the foreground image will appear to fade in.

Putting this into practice we get the following, which is a cross-browser compatible way of fading one image into another:

So, what do you need if you want to get this working on your website?

Four things:

1. An image tag.

   The image that is to be changed. It must be given a unique id.

   The example above uses the following HTML:

   <img alt="" src="emily03.jpg" id="emilyforegroundimg" width="201" height="201">

   In this example the image was given the id of "emilyforegroundimg".

2. A background to the image.

   The image needs to have a background. Each time a new image is faded in the previous image is copied by the JavaScript to the background.

   The example above uses a <div>, and appears in the HTML as follows:

   <div id="emilybackgrounddiv">
     <img alt="" src="emily03.jpg" id="emilyforegroundimg" width="201" height="201">
   </div>

   Note:

   •  that the image is contained inside this div, which is why this HTML fragment shows both the container and the image. The containing <div> is (in this example) given the id of "emilybackgrounddiv".
3. Some JavaScript.

   This page uses the following JavaScript:

   <script type="text/javascript">
   // Opacity and Fade in script.
   // Script copyright (C) 2008 http://www.cryer.co.uk/.
   // Script is free to use provided this copyright header is included.
   function SetOpacity(object,opacityPct)
   {
     // IE.
     object.style.filter = 'alpha(opacity=' + opacityPct + ')';
     // Old mozilla and firefox
     object.style.MozOpacity = opacityPct/100;
     // Everything else.
     object.style.opacity = opacityPct/100;
   }
   function ChangeOpacity(id,msDuration,msStart,fromO,toO)
   {
     var element=document.getElementById(id);
     var opacity = element.style.opacity * 100;
     var msNow = (new Date()).getTime();
     opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;
     if (opacity<0) 
       SetOpacity(element,0)
     else if (opacity>100)
       SetOpacity(element,100)
     else
     {
       SetOpacity(element,opacity);
       element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",1);
     }
   }
   function FadeIn(id)
   {
     var element=document.getElementById(id);
     if (element.timer) window.clearTimeout(element.timer); 
     var startMS = (new Date()).getTime();
     element.timer = window.setTimeout("ChangeOpacity('" + id + "',1000," + startMS + ",0,100)",1);
   }
   function FadeOut(id)
   {
     var element=document.getElementById(id);
     if (element.timer) window.clearTimeout(element.timer); 
     var startMS = (new Date()).getTime();
     element.timer = window.setTimeout("ChangeOpacity('" + id + "',1000," + startMS + ",100,0)",1);
   }
   function FadeInImage(foregroundID,newImage,backgroundID)
   {
     var foreground=document.getElementById(foregroundID);
     if (backgroundID)
     {
       var background=document.getElementById(backgroundID);
       if (background)
       {
         background.style.backgroundImage = 'url(' + foreground.src + ')';
         background.style.backgroundRepeat = 'no-repeat';
       }
     }
     SetOpacity(foreground,0);
     foreground.src = newImage;
     if (foreground.timer) window.clearTimeout(foreground.timer); 
     var startMS = (new Date()).getTime();
     foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "',1000," + startMS + ",0,100)",10);
   }
   </script>

4. Calls to the FadeInImage function.

   The FadeInImage function fades an image into view. It takes three parameters:

   foregroundID

   The id of the foreground image. This is "emilyforegroundimg" in the example above.

   newImage

   The source of the new image. If the image file is in the same folder then this can be simply the image file name, otherwise put in the full path to the image.

   backgroundID

   The id of the background. This is "emilybackgrounddiv" in the example above.

   To call this from a link (as in the example above) define an on-click handler. For example the HTML for the above "image one" link is as follows:

   <a href="#self" onclick="FadeInImage('emilyforegroundimg','emily01.jpg','emilybackgrounddiv')">
   image one</a>

   As you can tell, the name of the image file is "emily01.jpg".

You are free to use and customise this for your own use, but please acknowledge the original source.