Now that virtually every browser supports opacity, I have started using it more in the past year. However, there a lot of people who are still using Windows 2000 or earlier (98 especially) and thus can only use up to version 6 of Internet Explorer. IE 7 supports the opacity option fully, while version 6 using the DirectX filters for this option. It is fun to manipulate the opacity using JavaScript, as you can get some really neat effects with it. I have developed some code to make it so that you can set the opacity on any browser that supports it.
function set_opacity(div, val) {
if (div.filters) { //For IE
val *= 100;
try {
div.filters.item("DXImageTransform.Microsoft.Alpha").opacity = val;
} catch (e) {
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
div.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity='+val+')';
}
} else {
div.style.opacity = val;
div.style.MozOpacity = val; //This is for older Mozilla Browsers
}
}
It’s pretty straight forward. The official opacity property is supposed to be a decimal up to 1, while MS uses a percentage value up to 100. The number passed to the function is the official way of passing the number, and in the case of IE it multiplies this number by 100 to get the percentage as IE expects it. It may wipe out other filters if you have them set for the DIV (or whatever else you pass to it), but as I am not aware of any other filters which have an equivalent in all the other browsers, you probably should not be using them anyway :).