Here’s a short snippet to set the opacity of an element:
function setOpacity(e,opacity){
var o=e.style;
o.opacity=(opacity/100); //Opera
o.MozOpacity=(opacity/100); //Mozilla+Firefox
o.KhtmlOpacity=(opacity/100); //Konqueror
o.filter="alpha(opacity="+opacity+")"; //IE
}
var e=document.getElementById('myElement');
setOpacity(e, 50);//Sets the opacity to 50%
I would add a little timer to the opacity effect:
/* Effects: Fade effect for images */
var baseopacity=50
function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? “ie” : typeof which2.style.MozOpacity==”string”? “mozilla” : “”
instantset(baseopacity)
highlighting=setInterval(”gradualfade(imgobj)”,50)
}
function slowlow(which2){
cleartimer()
instantset(baseopacity)
}
function instantset(degree){
if (browserdetect==”mozilla”)
imgobj.style.MozOpacity=degree/100
else if (browserdetect==”ie”)
imgobj.filters.alpha.opacity=degree
}
function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}
function gradualfade(cur2){
if (browserdetect==”mozilla” && cur2.style.MozOpacity
That’s cool. You could also use Script.aculo.us’ Effect.Opacity