Developers Web home
3D Engine
Floating Elements
HTTP Requests
Crib Sheets
Expanding & Collapsing

Multi-browser transparency of an Element

If we wish to make an element semi-transparent, we can define the alpha of the element, using the style of the object. But because different browsers use different conventions, we must accomodate each:

function fader(obj,opacity) {
var fullscaleopacity=opacity*(100/desiredDarkness);
if (obj.style){
if (obj.style.MozOpacity!=null) {
obj.style.MozOpacity = (opacity/100) - .001;
}else if (obj.style.opacity!=null){
obj.style.opacity = (opacity/100) - .001;
}else if (obj.style.filter!=null){
obj.style.filter = "alpha(opacity="+opacity+")";
}
}
}

for example, to set the alpha of a DIV element when it loads:

<div onload="fader(this,50)">DIV Element with 50% alpha</div>
No conversation on this topic You must be logged in to add to the conversation