Opacidad en imagen al pasar el mouse

En una entrada anterior habíamos visto cómo añadir opacidad a una imagen y agregarle texto encima; lo que vamos a ver hoy es algo similar , sólo que la imagen se va a poner opaca al pasar el mouse:



Para conseguirlo es muy sencillo, bastará con usar el siguiente código:

<img src="URL-imagen" width="500" height="375" onmouseout="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseover="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/>

» Cambiaremos width="500" height="375" por el ancho y el alto de la imagen respectivamente.

A este código podemos darle infinidad de usos: por ejemplo para añadir el efecto a las banderitas de un traductor o a los marcadores sociales, todo esto lo veremos en próximos post.