Cómo cambiar la propiedad de opacidad en HTML desde CSS y Javascript

Primero quiero aclarar que pueden existir otros métodos para realizarlo pero deifnitivamente estoy seguro que hasta el día de hoy 22 de septiembre del 2009 es la mejor manera y ha sido testeada con resultado 100% eficientes en los siguientes navegadores:

• Internet Exporer 7 y 8
• Firefox 3 y 3.5
• Safari 4
• Chrome 2
• Opera 9.64

Esta propiedad permite darle transparencia a un determinado elemento dentro de una página web.

Definitivamente es muy útil pero tiene el problema de que aún no ha sido estandarizada para la programación destinada a la generalidad de navegadores web.

Y esta propiedad demuestra que el tan preciado navegador Firefox “NO CUMPLE STÄNDARES”.

Bueno explicado esto vayamos a lo práctico:

Para IE el código css es el más “diferente” se declara así:

#id_de_mi_elemento{ filter:alpha(opacity=100); } // el objeto quedará sólido
#id_de_mi_elemento{ filter:alpha(opacity=80); } // el objeto tendrá una transparencia del 80%.

Para Firefox el código es de esta manera

#id_de_mi_elemento{ -moz-opacity:1.0; } // el objeto quedará sólido
#id_de_mi_elemento{ -moz-opacity:0.5; } // el objeto tendrá una transparencia del 50%.

Para el resto de los navegadores antesmencionados (la manera que deberían adoptar FF y IE en el futuro):

#id_de_mi_elemento{ opacity:1.0; } // el objeto quedará sólido
#id_de_mi_elemento{ opacity:0.05; } // el objeto tendrá una transparencia del 5%.

Exicado una vez eel código css pasemos a Javascript para realizar el cambio de esta propiedad hay q tener en cuenta que si no quieren tener problemas con esta propiedad SI o SI deben declararla en la hoja de estilos cmo expliqué recien.

Javascript nos trae el primer problema si cambiamos el códgo para cambiarla en IE no se reconoce en los demás navegadores por lo que el script les va a dar un error por eso debemos impedir que se ejecute si el navegador no es IE.

Solución:
if (navigator.appName.indexOf(”Explorer”) != -1){ /*sentencias solo para ie*/ }

Sentencia para cambiar la opacidad en IE desde javascript:
document.getElementById(’id_de_mi_elemento’).filters.alpha.opacity=50;

Sentencia para cambiarla opacidad en FF desde javascript:
document.getElementById(’id_de_mi_elemento’).style.MozOpacity=0.5;

Sentencia para el resto de los navegadores:
document.getElementById(’id_de_mi_elemento’).style.opacity=0.5;

La explicación de como se hace ya esta resuelta vayamos aun ejemplo práctico para una mejor comprención:

function set_opacity(){
document.getElementById(’id_de_mi_elemento’).style.opacity=0.5;
document.getElementById(’id_de_mi_elemento’).style.MozOpacity=0.5;
if (navigator.appName.indexOf(”Explorer”) != -1){
document.getElementById(’id_de_mi_elemento’).filters.alpha.opacity=50;
}
}

Si tienen dudas escriban un comentario! saludos…