Efecto de Transparencia en las Imagenes

>> //seccion/javascript/ -- 0 comentario /// Agregado el 2005-03-15 @ Por SparoHawk

Aqui les damos un tip para hacer que sus imagenes tengan un efecto de transparencia. Muy cool y fácil de aplicar y funciona en todos los exploradores.

No es que sea un tutorial en realidad, es más una guía de como utilizar un efecto de JavaScript que a mucha gente le gusta, además de darles el código de este.

Code:

<head>
 <script language="JavaScript">
 <!--
 
 if ((navigator.appName.indexOf('Microsoft')+1)) {
   document.write('<style type="text/css"> .opacidad1 {filter:alpha(opacity=50)} .opacidad2 {filter:alpha(opacity=100)} </style>');
 }
 
 /* Con este código, verificamos si el explorador es Internet Explorer para así "imprimir" las clases de CSS correspondiente. */
 
 if ((navigator.appName.indexOf('Netscape')+1)) {
   document.write('<style type="text/css"> .opacidad1 {-moz-opacity:0.5} .opacidad2 {-moz-opacity:1} </style>');
 } else {
   document.write(''); // Si no se detecta ningunos de los dos exploradores, no se imprime nada.
 }
 
 /* Con este otro código verificamos si el explorador es basado en Netscape (de los cuales se encuentran toda la gama de los Mozilla),para así "imprimir" las clases de CSS correspondiente. */
 
 // -->
 </script>
 </head>
 
 <body>
 
 <img src="imagen.jpg" border="0" class="opacidad1" onmouseover="this.className='opacidad2'" onmouseout="this.className='opacidad1'">
 
 <!-- Aqui estamos usando las clases que definimos utilizando el código de JavaScript. -->
 
 </body>


Ustedes de preguntaran: ¿Por qué hay que usar un JavaScript y dos cosas diferentes? Fácil.

Verán, Microsoft desarollo Internet Explorer con unos elementos que puedes usar con CSS, que son los filtros de transformación. De estos hay muchos y yo los cubriré más adelante en los tutoriales de CSS que estoy escribiendo. Entre estos filtros se encuentra unos que modifica la opacidad de las imágenes. Además, estos filtros sólo funcionan en IE, de modo que sería inútil incluirlos en una página que va a ser vista en un explorador con base a Netscape. Bueno, no es que sería inútil, pero los usarios con Firefox (por ejemplo) no verían el efecto como lo había pensado el webmaster de X página.

Sin embargom, Netscape también tiene un control de opacidad que sólo funciona en Netscape y no en IE. De modo que utilizamos el JavaScript para modificar los filtros que usamos de acuerdo al explorador.

Ejemplo

Bueno, me salí un poco del tema, pero ya entienden a lo que me refiero. Cuando quieran utilizar el efecto en una imagen, lo hacen como el ejemplo que les di más arriba (que esta entre los elementos <body>...</body>.

Eso es todo, espero que le haya gustando y que le saquen provecho.

MC | #permalink 0 comentario