Veremos un ejemplo de cómo lograr un Fade in o un Fade out de transparencia de un objeto utilizando javascript. Para ello usaremos un temporizador setInterval y una función que aplique la transparencia a un objeto que le pasemos por parámetro. Esa función usará estilos css para los navegadores estandar y filtros propietarios para explorer. aca un ejemplo en el blog de pruebas.
También un ejemplo en la entrada: Ver ejemplo de imagen
Javascript
El código que utilizaremos será el siguiente:
El código javascript para que funcione debemos pasarlo por este Parse HTML para Blogger XML templates e introducirlo antes de la etiqueta
Generar imágenes en entradas
Para generar la imagen con el efecto bastaría con añadir las siguientes líneas de código en una entrada de blogger
Con eso se generaría un texto llamado Ver, pueden cambiarlo obviamente, bueno al presionar el texto se generará la imagen con el efecto y presionando clic en la imagen se ocultara con el efecto.
También un ejemplo en la entrada: Ver ejemplo de imagen
Javascript
El código que utilizaremos será el siguiente:
[<script language='JavaScript'> function set_opacity(div, value) { div.style.opacity = value; div.style.MozOpacity = value; div.style.KhtmlOpacity = value; div.style.filter = 'alpha(opacity=' + value*100 + ')'; div.style.zoom=1;//necesario para Explorer } var transicion=function(inicio,fin,segundos){ var _this=this; this.test=0; if(_this.intervalo)clearInterval(_this.intervalo); if(this.val && Math.abs(fin-_this.val)<0.01)return; this.val=!this.val?inicio<1?inicio+.0001:inicio:this.val; set_opacity(this, this.val); this.pasos=(fin-inicio)/100; this.pausa=segundos*10; this.intervalo=setInterval( function(){ if(_this.test>99 || Math.abs(fin-_this.val)<0.01){ clearInterval(_this.intervalo); } _this.test++; //document.getElementById("log").innerHTML=_this.test; _this.val=_this.val+_this.pasos; if(_this.val<=.01) _this.style.display='none'; else _this.style.display='block'; set_opacity(_this, _this.val); },this.pausa); } function ver(){ var obj=document.getElementById("fondo"); transicion.call(obj,0,1,3); } function cerrar(){ var obj=document.getElementById("fondo"); transicion.call(obj,1,0,3); } </script>]
El código javascript para que funcione debemos pasarlo por este Parse HTML para Blogger XML templates e introducirlo antes de la etiqueta
</head>.Generar imágenes en entradas
Para generar la imagen con el efecto bastaría con añadir las siguientes líneas de código en una entrada de blogger
[<a href="#top" onclick="ver();">Ver</a> <img src="url-imagen" id="fondo" style=" display:none; cursor:pointer;" onclick="cerrar();" title="Click para ocultar" /> <!--<div id="log"></div> -->]
Con eso se generaría un texto llamado Ver, pueden cambiarlo obviamente, bueno al presionar el texto se generará la imagen con el efecto y presionando clic en la imagen se ocultara con el efecto.
Cabe destacar que puede ser un poco complicado la inclusión de la imagen, pues solo subanla normalmente como se acostumbra en blogger y copiar el url de la imagen y añadirlo en el código ya proporcionado.
