IMG Fader

This page demonstrates a simple, cross browser image fader. For unsupported browsers, the images are simply switched.

This work is licensed under a Creative Commons License.

Syntax

var imgFader = new ImgFader(ida, idb, time);
...
imgFader.start();

Arguments

ida
String that specifies the id of the first image
idb
String that specifies the id of the second image
time
the time the fade should take (in seconds)

Examples

Common prerequisite

Include the file img-fader.js in your document:

<script type="text/javascript" src="img-fader.js">
</script>

CSS

Todo:

div#img-fader
{
    position: relative;
}
div#img-fader img
{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

Todo:

onload = function() {
    var imgFader = new ImgFader("img-a", "img-b", time);
}

onclick fading

time = 2.5;
<div id="img-fader" onclick="imgFader.start()">
    <img id="img-a" src="img1.png" />
    <img id="img-b" src="img2.png" />
</div>

onmouseover fading

time = 2;
<div id="img-fader" onmouseover="imgFader.start()">
    <img id="img-a" src="img1.png" />
    <img id="img-b" src="img2.png" />
</div>

text to image onclick fading

fade to image

time = 1;
<div id="img-fader" onclick="imgFader.start()">
    <p id="img-a">fade to image</p>
    <img id="img-b" src="img2.png" />
</div>

Supported Browsers