Compatible with multi-browser implementation of translucent (Opera ie Firefox) _ Experience Exchange

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 the IT works on the most browsers we use all three.

opacity:0.5;
This is the official CSS3 method, at the moment it works in newer Mozilla versions.
-moz-opacity:0.5;
This one works in older versions of Mozilla and Phoenix/firebird/firefox.
-khtml-opacity:0.5;
This was used by browsers the use teh khtml rendering engine, namely Konquerer on Linux and Safari on MacOS.
Filter:alpha (opacity=50);
This one works with only in MSIE.
There is actually another one:-khtml-opacity:0.5; Works for the browsers konquerer in Linux and Safari on MacOS. You could add it too if you want to support these users. Somewhere in the browsers would support CSS3 and opacity:0.5; should work everywhere.
Copy CodeThe code is as follows:
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 is 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++;
}
}
}

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 + ")";
}

function shiftopacity (ID, millisec) {
If an element was invisible, make it visible, else make it ivisible
if (document.getElementById (id). style.opacity = = 0) {
Opacity (ID, 0, millisec);
} else {
Opacity (ID, 0, millisec);
}
}

function Blendimage (divID, imageID, ImageFile, millisec) {
var speed = Math.Round (millisec/100);
var timer = 0;

Set the current image as background
document.getElementById (divid). style.backgroundimage = "url (" + document.getElementById (imageID). src + ")";

Make image Transparent
Changeopac (0, imageID);

Make New image
document.getElementById (imageid). src = imagefile;

Fade in image
for (i = 0; I <=; i++) {
SetTimeout ("Changeopac" ("+ i +", ' "+ imageID +" ') ", (Timer * speed));
timer++;
}
}

function Currentopac (ID, opacend, millisec) {
Standard opacity is 100
var currentopac = 100;

If the element has an opacity set, get it
if (document.getElementById (ID). style.opacity < 100) {
Currentopac = document.getElementById (ID). style.opacity * 100;
}

Call for the function that changes the opacity
Opacity (ID, Currentopac, opacend, millisec)
}

more references
http://www.brainerror.net/scripts_js_blendtrans.php
http://realazy.org/blog/2006/03/21/ie-firefox-opera-alpha-transparency/
http://alistapart.com/stories/pngopacity/

