View Full Version : Fade one image to another

03-16-2007, 10:01 AM
I need a script to fade one image to another and not flicker in FireFox. Any ideas? :)

03-16-2007, 10:08 AM
Have you tried this script (http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm)

03-16-2007, 10:09 AM
Actually, I have but I don't need a slideshow, just fading one image to another.

03-16-2007, 10:21 AM
what about tweaking the technique used here (http://clagnut.com/sandbox/imagefades/) so that it can serve your purpose.

03-17-2007, 03:00 AM
I want to fade from one image to another, not just for one image.

03-17-2007, 05:15 AM
I've had this lying around for awhile:


Check out the bottom most image.

03-17-2007, 05:58 AM
Yep, that's the effect that I want. But I don't know what function it is in your code...

03-17-2007, 07:18 AM
Well the entire script is used and BTW, this isn't the standard Ultimate Fade In script. The particular code for that last image is:

<div style="position:relative;z-index:10000;width:140px;" onmouseover="switchFade(3,2)" onmouseout="switchFade(0,2)"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages2, 140, 225, 0, 100, 1)

What you are most concerned with are the mouse events. The script initializes the 'show' which is then controlled by the mouse events. I'll break one of those mouse events down:


The red 3 is the image associated with the array entry [3] for this show which is using the fadeimages2 array as you can see in the script call. That means photo9.jpg:

fadeimages2[3]=["photo9.jpg", "", ""] //plain image syntax

The green 2 means that it is the 3rd instance of a show on the page. Instances are numbered from 0 to whatever and because there are two other shows before it (0 and 1), this instance is 2.

Basically what function switchFade(iNum, instance) does is switch to and fade in the image number to the show instance.

03-18-2007, 04:39 AM
When I tested your script, the page just flickered (black to white and black again).

I've found another script (http://www.brainerror.net/scripts_js_blendtrans.php) that lets me blend images (shorter version/no slideshow) but it flickers. Anyone know why?

03-20-2007, 06:02 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->


<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var maximages =6; // how many fade images do you have?
var fadespeed = 300; // fade frame time in milliseconds; 125 = 125 ms

var fadeintimer;
var fadeouttimer;
var fadeincount = 0;
var fadeoutcount = maximages-1;
var fadearray = new Array(maximages); // enter all the fade images here
// the first item should be 0, then numbered through 1 less than your maximages

fadearray[0] = "http://javascript.internet.com/img/fading-rollover/fade00.jpg";
fadearray[1] = "http://javascript.internet.com/img/fading-rollover/fade01.jpg";
fadearray[2] = "http://javascript.internet.com/img/fading-rollover/fade02.jpg";
fadearray[3] = "http://javascript.internet.com/img/fading-rollover/fade03.jpg";
fadearray[4] = "http://javascript.internet.com/img/fading-rollover/fade04.jpg";
fadearray[5] = "http://javascript.internet.com/img/fading-rollover/fade05.jpg";

for (var i = 0; i < maximages; i++) {
eval('pic' + i + ' = new Image();');
eval('pic' + i + '.src = fadearray[i];'); // preloads fade images
function fade_in() {
document.images['fade-pic'].src = fadearray[fadeincount];
if (fadeincount != maximages-1) {
fadeintimer = setTimeout('fade_in()', fadespeed);
else {
fadeincount = 0;
function fade_out() {
document.images['fade-pic'].src = fadearray[fadeoutcount];
if (fadeoutcount != 0) {
fadeouttimer = setTimeout('fade_out()', fadespeed);
else {
fadeoutcount = maximages-1;
// End -->

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->


<img src="http://javascript.internet.com/img/fading-rollover/icontop.gif" border=0><br>
<img name="fade-pic" height=56 width=300 border=0 src="http://javascript.internet.com/img/fading-rollover/fade00.jpg"><br>
<img src="http://javascript.internet.com/img/fading-rollover/iconbtm.gif" border=0><br></a>

<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>

<!-- Script Size: 2.49 KB -->
<script type="text/javascript">

03-20-2007, 06:21 AM
That script doesn't fade properly.

03-20-2007, 07:07 AM
Try this one

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
/*This script i've found in http://clagnut.com/sandbox/imagefades/ */
/* I've customized the original script a bit to fit in this case */

function initImage(newImage) {
imageId = 'thephoto';
image = document.getElementById(imageId);
image.src = newImage;
setOpacity(image, 0);

function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;

// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";

// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;

// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;

// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;

function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 15;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);

<img src="ithak.jpg" border="0" alt="" width="450" height="338" id="thephoto" />
<script type="text/javascript">
var newImage = "ithaka.jpg";

Store the attached images (after unzipping) in the same folder where ther above mentioned page resides.

03-20-2007, 07:11 AM
Thanks that's looking good!

But I want it to blend one image to another.

11-12-2010, 04:43 AM
Hello John:

As you already know, your script in post #8 works very well in fading images.
I'm playing with it to replace the jsfx image rollovers script, because it has limitations when using PNG translucent images; on page load, it displays the inital PNG image two times. Therefore the opacity gets doubled until after a tab is hovered the first time.

Unfortunately, as is, your script does not allow any translucency of the PNG images; they all appear to be 100% opaque, although they have a 60% opaque black background.

If it can be done, when you have the opportunity, would you please show me how your script must change in order to allow the images to fade from one to the other while retaining their translucency?

Thank you,


11-12-2010, 05:44 AM
Unless you're very good at manipulating the alpha level opacity masks of .png images, better than I, and perhaps not even then, .png cannot be faded successfully in IE 8 or less. In IE 9 (which I haven't worked with yet) it's my understanding that there is a pathway available that may do this.

The reason being that in IE 8 and less the only way to fade things is via the alpha opacity filter. This conflicts with the alpha channel opacity of alpha channel .png images, making them appear opaque where they are really semi-transparent unless the alpha channel masks in those .png images can be made of a different color than the alpha opacity filter uses in IE. I've seen this done, not perfectly, but well enough to make me think it could perhaps be done flawlessly. I just have no idea how to go about it.

In IE 9 MS introduces the opacity style property - presumably the same one that has been available in all other browsers now for many years. This style property has no conflict with the alpha channel of .png images, at least not in those other browsers.

11-12-2010, 06:29 AM
Thanks for your reply John.

I can handle the PNG masking in Photoshop. What color is recommened for the perfect result you think can be achieved? if you can tell me what's needed, I'll make it. But what about the code, can it remain as is, or does it also need adjusting?


In the meantime, I'll enter a new thread. Hopefully there's a solution for the JSFX problems.

11-12-2010, 07:44 AM
As I say, I don't really know. My general impression is that the default mask is based upon the color black and that's what the alpha opacity filter uses as well. If a different color can be used for the mask, it might work out.

But I may be wrong, and am almost certainly oversimplifying it.

I've seen the results of this or something having been done in The Gimp. Some black or whatever was left in though, perhaps unavoidably. Those sections were still opaque once any filter of IE was applied to the image. I'm not sure if other programs can do it, or just exactly what was done.

11-12-2010, 08:18 AM
Seeing the difficulty in making proper PNG masks, I'll first try to solve this problem by solving the JSFX flickering problem. Here...


Otherwise, JSFX can handle translucency.

Thanks John.


11-13-2010, 05:50 PM
Since my last post on this I've seen your images. They do not use a black mask. So they are not opaque black with IE filters in those sections that employ the semi-transparent mask. They are however opaque in those sections in that color that is used. During fading, this is hardly noticeable. Once completely faded in, they are completely opaque though. That's why I don't fade them all the way in for browsers with filters in the jQuery solution I offered in your other thread on this:

var finOp = document.body.filters? 0.85 : 1;

This only works because they are so similar to the background images (without filters) that they are covering that it all works out. This is also true of how it works in other browsers, but for a different reason.