Efecto de imagen opaca en el evento OnMouseOver
Martes, Febrero 9th, 2010
En muchas webs hemos visto en los banners de 125×125 que les ponen un efecto de opacidad, y que al cruzar el mouse sobre el banner este retorna a sus colores originales. Esto lo podemos hacer con CSS y se puede decir que implementado un “poquito” de JavaScript aunque no es totalmente necesario saber este lenguaje.
Vamos a poner un ejemplo para los que no entienden aun de que se trata. Tenemos la imagen opaca:
Basta con agregar el siguiente código para que la opacidad se aplique a nuestra imagen cargada:
<img src="Ghost.png" style="opacity: 0.4; filter:alpha(opacity=40)"/>
Pero hay que tener algo claro, que el opacity: 0.4; es especifico para Firefox y el filter:alpha(opacity=40) funciona para Internet Explorer. Lo recomendable es agregar las dos etiquetas para tener compatibilidad total con casi todos los navegadores (Incluidos Opera y Chrome).
Ahora solo basta agregar los eventos OnMouseOver (Mover el cursor sobre) y el evento OnMouseOut (Sacar el cursor de) en la misma etiqueta de nuestra imagen.
<img src="Ghost.png" style="opacity: 0.4; filter:alpha(opacity=40)" OnMouseOver="this.style.opacity=1;this.filter.alpha(opacity=100)" OnMouseOut="this.style.opacity=0.4;this.filter.alpha(opacity=40)" />
El resutado de lo anterior es esto (Pueden pasar el cursor y ver que pasa):
(más…)