Hace algún tiempo realicé un script (en javascript y PHP) que a día de hoy sigue siendo tremendamente difícil crear puesto que cada navegador utiliza una invención diferente para las transparencias pero tras una exhaustiva depuración conseguí que funcionase en IE, Firefox, Opera, Konqueror, Safari, Netscape... en fin; En todos, puesto que no he encontrado ningún navegador actual para PC en el que no funcione.
Se trata de un efecto Fade IN, Fade OUT que hace que un elemento sea parcialmente (o completamente) transparente y que deje de serlo progresivamente cuando pasamos el ratón por encima y vuelva a su estado inicial cuando sacamos el ratón. Se puede aplicar tanto en imágenes como en tablas y capas y aporta un efecto realmente profesional además de un acabado magnífico puesto que el desarrollo es impecable.
Pulsando aquí (se abrirá en una nueva ventana) podeis ver algunos ejemplos del script en funcionamiento. En ellos, explico que no es solo un script 100% compatible, sino que además es configurable tanto los máximos y mínimos de transparencia como la velocidad a la que deseais que llegué a los limites de alpha asignado.
Para integrarlo, necesitas un servidor con PHP; Sí, PHP, es un javascript que detecta la versión del navegador mediante PHP; Decidí hacerlo así por cuestión de velocidad; De todos modos, para cualquier programador ASP no será difícil de adaptar y si deseas que funcione 100% en javascript tampoco es demasiado complicado buscando ejemplos de como identificar el navegador remoto en JS, pero, mi ejemplo, es PHP + Javascrip que, a mi parecer, es la opción más eficiente:
Su integración es simple, en una página HTML, depués del tag <head> tendréis que incluir "<script language="javascript" src="js/alphafade.php">" donde alphafade.php tiene que estar accesible (podéis cambiar la ruta y dejar el archivo alphafade en cualquier otro directorio) y, el script de alphafade lo podéis descargar con el ejemplo anteriormente mostrado desde este vínculo (Está comprimido en zip y el script alphafade.php está dentro de la carpeta /js/).
Si queréis dar a un objeto la "magia" del fade una vez incluido el script en el head, únicamente tenéis que asignarle las propiedades: "name="Ejemplo"" e "id="Ejemplo"" (recordar que han de ser únicos en toda la página, es decir, no más de un objeto con el mismo nombre ni id pero para cada objeto la id y el nombre han de ser exactamente igual) así como el siguiente estilo: "style="opacity:.20; filter:alpha(opacity=20); -moz-opacity:0.20; -khtml-opacity:0.20;"" donde todos los números "20" son la opacidad inicial para los distintos navegadores (si queréis que vuelva al mismo estado recordar de coincidirla con el máximo de FadeOut) y los eventos: "onmouseover="javascript:FadeIn(this,'100','1');"" y "onmouseout="javascript:FadeOut(this,'20','1');"" Fijaos bien en estos eventos; En FadeIn (OnMouseOver), el primer número, define que nivel de opacidad se le retornará al objeto (100%) cuando el ratón no esté encima suyo y a qué velocidad lo hará, en este caso: "1" (contra mayor sea el número más rápido se llegará a la opacidad asignada); Y, en el FadeOut (OnMouseOut) definimos la transparencia máxima que adquirirá el objeto mientras el ratón se encuentre encima del item así como la velocidad a la que se llegará a este nivel de alpha.
Un ejemplo de implementación completo en una imagen quedaría tal que así: "<img id="Imagen1" name="Imagen1" onmouseout="javascript:FadeOut(this,'40','4');" onmouseover="javascript:FadeIn(this,'100','4');" src="http://www.blogger.com/img/tortuga.gif" style="-khtml-opacity: 0.40; -moz-opacity: 0.40; filter: alpha(opacity=40); opacity: .45;" />". Fácil y bonito ¿eh?
Un sencillo efecto que mejorará la apariencia siendo el único (o eso creo, ya que lo programé por que no encontré ningún otro en la red) que es 100% compatible con todos los navegadores actuales. Así como hay que decir que es muy "liviano" pesando menos de 4 KB (ya que el JS no se envía entero, solo partes según el navegador) y no sobrecargando la CPU del navegante siempre y cuando no se abuse del efecto.
0 comentarios:
Publicar un comentario