Hoy queria enseñaros un truco para los que usáis una imágen con efecto que sube la página al principio del blog o cabecera, algo así cómo el 'imágen flotante + ir arriba' pero algo más extendido, que a mi juicio queda más atractivo para nuestro blog. Se trata de un script que hace la función de ocultar una imágen para mientras que se carga el blog tarde X segundos en aparecer, yo lo había visto en diversos blogs y no me di cuenta de este truquito hasta que busqué por internet y di con la clave
. O tambíen se puede usar este truco para mostrar dos imagenes distintas, eso a gusto de cada uno.Pues si quieres probar este truquillo no tienes más que buscar ]]></b:skin> y debajo colocamos esto:
<script type='text/javaScript'>
function cambiaimagen(){
document.getElementById('imagen').innerHTML='<img src='imagen1.gif'/>';
}
</script>
function cambiaimagen(){
document.getElementById('imagen').innerHTML='<img src='imagen1.gif'/>';
}
</script>
Y luego buscamos en el final de la plantilla donde dice </body> pues justo arriba ponemos esto otro:
<body onload='setTimeout(cambiaimgen,5000);'>
<div id='imagen'>
<img alt='' border='0' src='http://i304.photobucket.com/albums/nn161/Juanjopetiso/bolsazo.png' style='position:fixed; bottom:0; right:0;' title=''/>
</div>
</body>
<div id='imagen'>
<img alt='' border='0' src='http://i304.photobucket.com/albums/nn161/Juanjopetiso/bolsazo.png' style='position:fixed; bottom:0; right:0;' title=''/>
</div>
</body>
Sólo tenéis que cambiar la imágen que tengo yo puesta de Luisa Lanas por la que vosotros queraís, la he dejado para que se vea más claro donde debe ir la primera imagen y la segunda.
No os asusteís si ahora veís dos </body> prácticamente juntos
, tienen que ir así si no no funcionará este truco.Ahora paso a explicaros que hemos hecho, debajo de ]]></b:skin> en donde dice "imagen1.gif" no pongaís nada lo dejaís si lo quereís sólo con una imagen cómo lo tengo yo, si lo que quereís es tener 2 imagenes pues ahí poneís la primera imagen que quereís que se muestre.
Y por último en la línea que dice <body onload='setTimeout(cambiaimgen,5000);'> es la llamada función a la carga y cambio de imágen, ahí cambiamos 5000 por los segundos que queramos que tarde en enseñar la imagen, esta mostrado en milisegundos asi que 10000 serán 10 segundos, oks? facil no? espero que os haya servido para algo.
No hay comentarios:
Publicar un comentario