Opacidad en imágenes mediante MooTools
Un efecto interesante que podemos usar en nuestros diseños web es el de la opacidad, jugando con diferentes grados sobre las imágenes. Para conseguirlo lo podemos hacer mediante css o bien con el estupendo framework javascrip MooTools. David Walsh nos explica en su blog los pasos necesarios y el script que necesitamos que paso a adaptar al español. Aquà tenéis la demo de lo que obtendremos.
Lo primero es descargar MooTools en su versión 1.2. Cuando lo tengamos creamos un archivo .html y entre sus etiquetas head llamamos a la librerÃa:
-
<script type="text/javascript" src="moo1.2.js"></script>
Seguido introducimos el siguiente script:
-
<script type="text/javascript">
-
/* on dom ready ... */
-
window.addEvent('domready', function() {
-
/* for each image that requires opacity */
-
$$('.opacity').each(function(el) {
-
/* set the opacity based on the alt value */
-
el.set('opacity','.' + el.getProperty('alt'));
-
});
-
});
-
</script>
Finalmente incluimos las imágenes a las que queremos darle la opacidad, poniéndoles la clase opacity y usando su atributo alt para indicar el grado que queremos para cada imagen:
Listo, ya tenemos una forma simple de dar diferentes grados de opacidad a las imágenes de una página web.
Enlace: Using MooTools For Opacity
Posts relacionados
- Cheat Sheet Mootols 1.2
- SmoothScroll mediante MooTools
- Thumbnoo, muestra imágenes con opción de ampliarlas
2 Comentarios
Dejar un comentario
Muy buen sistema para no tener que andar jugando con pngs, como siempre en Explorer (<7) no funciona, pero muchas gracias por el truco, no lo conocÃa. Creo que va siendo hora de empezar a "pasar" de Explorer y que el usuario descubra que ese navegador sólo sirve para bajarse firefox, opera, safari, konqueror, etc.
gracias, es un aporte genial que me viene a las mil maravillas