How to fade one image into another
The notes on this page provide guidance on two different ways to fade one image into another.
- 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.
- Using Opacity (i.e. transparency) - IE, Mozilla,
The second method changes the transparency of an image. This is more complex but works with a range of browsers.
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">
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.
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.
|0% opacity||25% opacity||50% opacity||75% opacity||100% opacity|
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?
- 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".
- A background to the image.
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>
- 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".
- Calls to the FadeInImage function.
The FadeInImage function fades an image into view. It takes three parameters:
- The id of the foreground image. This is "emilyforegroundimg" in the example above.
- 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.
- 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.