fading image using javascript

Show me what it does!

Hide – Show

Click on a link above to make the image disappear and re-appear by gradually fading in/out. It uses CSS transparency, in CSS you can set the transparency in different ways. To ensure that it works on most browsers we use all three.

• opacity: 0.5;
  This one is the official CSS3 method, at the moment it works in newer Mozilla (Gecko) browers, Safari and Opera.
• -moz-opacity: 0.5;
  This one works in older versions of Mozilla browsers.
• -khtml-opacity: 0.5;
  This is used by older versions of browsers that use the KHTML and WebKit rendering engine, namely Konquerer on Linux and Safari on Mac OS X.
• filter: alpha(opacity=50);
  This one works only in MSIE.

MSIE warning

This trick however doesn’t work with MSIE all the time. For example, it won’t work unless it has a specified width and/or height. Yes, that’s weird. MSIE sucks. Normal browsers like Mozilla will do it right.

This <div> has a can be made transparent in MSIE, it has a specified width of 300px. 0% – 50% – 100%

This <div> has no specified width, transparency doesn’t work in MSIE. 0% – 50% – 100%

Mozilla warning

No browser is perfect, Mozilla (latest version at the time of writing is 1.6) has a few bugs too.

JavaScript fun

OK, here is the real work being done. This JavaScript has two separate functions. The first one, opacity() is called first, it sets the timer and speed.

Then the if() looks whether opacStart is larger then opacEnd, if so, the Opacity will go backwards, else, it will go forward.

setTimeOut() will cause a short delay before calling changeOpac() so that we can actually see the fading effect.

The function changeOpac() does nothing more than setting the 3 different opacity styles for the appropriate element. Notice that you can’t use dashes (-) in style names in JavaScript, instead you must use a CAPITAL letter. In this example you can see changing -moz-opacity changing into MozOpacity, the same thing applies to all styles that contain dashes.

function opacity(id, opacStart, opacEnd, millisec) {
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;

//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i–) {
setTimeout(“changeOpac(” + i + “,’” + id + “‘)”,(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout(“changeOpac(” + i + “,’” + id + “‘)”,(timer * speed));
timer++;
}
}
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = “alpha(opacity=” + opacity + “)”;
}

Fade in/out with only one link

There is more that can be done! What about a single link to hide and show an element?

hide/show

<a href="javascript:shiftOpacity('digicam2', 1000)">show/hide</a>

It’s easy! With only a tiny bit of JavaScript! We’ll make another function named shiftOpacity(). It only requires two parameters:

• The element’s ID
• The duration of the transition in milliseconds.

This function does nothing more than checking whether the element is transparent and then calls the function opacity() to do the transition. This is what it looks like:

function shiftOpacity(id, millisec) {
//if an element is invisible, make it visible, else make it ivisible
if(document.getElementById(id).style.opacity == 0) {
opacity(id, 0, 100, millisec);
} else {
opacity(id, 100, 0, millisec);
}
}

source: http://brainerror.net/scripts/javascript/blendtrans/