Esta sección es para que podáis poner vuestros trucos y sugerencias, que conozcáis para mejorar nuestras web , se publicara, vuestro truco con un enlace a vuestra web y especificando de quien es cada nueva idea.

Voy a empezar yo con algunos  que me parecen bastante divertidos

Al final de esta pagina encontraras como hacer el codigo de objetos cayendo por la web

Cuando ponemos mucho contenido, o elementos pesados en cargar com los banner, los flash etc, nuestra pagina se queda parada hasta que carga por lo que nuestros visitantes se pueden aburrir de esperar a que cargue y abandonar nuestra web.

Os voy a dejar un código y la explicacion de como personalizarlo con la imagen que mas te guste para que aparezca al cargar la pagina y cuando ya esta cargada desaparece.

<script type='text/javascript'>
//<![CDATA[
    window.onload = detectarCarga;
    function detectarCarga(){
    document.getElementById("imgLOAD").style.display="none";
    }
    //]]>
</script>
<div id='imgLOAD' style="TEXT-ALIGN:center">
    <b>ESTA CARGANDO LA PAGINA, ESPERA UNOS SEGUNDOS</b>
    <center>
        <img src="" />
    </center>
</div>

Lo primero que hacemos es poner nuestro propio texto en lo que os he marcado en rojo, no os olvidéis que cuando la pagina este cargada desaparecerá, tanto el texto como la imagen.

Elegimos la imagen que queremos que aparezca cunado se este cargando la pagina, tenemos que saber la dirección URL de la imagen, ya he explicado en esta web como saber la dirección URL de una imagen, pero por si no lo has visto, lo explico de nuevo.

La foto tiene que estar on-line, pones el ratón encina de la foto picas en el lado derecho de este y te aparecerá Propiedades, vamos ahí, y aparece la dirección url de la foto ( LA COPIAMOS).

Ahora vamos a ponerla en el código , vamos a <img src="" />, y entre las comillas pegamos la dirección url.

EJEMPLO.

<img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/iacad83da5d6aec96/1305048448/std/image.gif" />

Este código esta centrado ( center), si lo quieres a la izquierda o a la derecha puedes cambiarlo pero siempre con la palabra en ingles ( left o right).

Y ya tenemos un bonito y original código de cargando la pagina.

<script type='text/javascript'>
//<![CDATA[
    window.onload = detectarCarga;
    function detectarCarga(){
    document.getElementById("imgLOAD").style.display="none";
    }
    //]]>
</script>
<div id='imgLOAD' style="TEXT-ALIGN:center">
    <b>ESTA CARGANDO LA PAGINA, ESPERA UNOS SEGUNDOS</b>
    <center>
        <img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i78e7b88685198fb1/1307439157/std/image.gif" alt="" />
    </center>
</div>

La url de la imagen para que todos me entendeis es como si fuera un nombre propio , cada imagen tiene uno, y para los codigos que queramos que aparezca una imagen siempre nos pediran la identidad de esta, es su manera de identificarla

Aunque ya lo he explicado en muchas ocasiones, se que algunos teneis dificultad en saber y encontrar la url de una imagen para poner en los codigos, como cada navegador tiene una opcion diferente os unos cuantos y asi os sera super sencillo poner la url de la imagen

• Con Internet Explorer. Botón derecho del ratón sobre la imagen,  nos abrirá un cuadro en el que al final veremos propiedades, bueno pues esa es la url de la imagen que se copia y pega en el lugar del código que te solicitó una url de imagen.
• Con Google Chrome.Al hacer click con el ratón sobre la imagen, veremos como un  cuadrito ( menú contextual) y pone copiar la url de la imagen.
• Con Safari puedes copiar enlace.
• Con Mozilla es copiar ruta de imagen

No copies la url de las imagenes de ninguna web, ya que si su propietario las quita o las cambia de lugar os quedais sin ellas, subelas desde tu PC, y ponlas en linea, para copiar la url de la imagen.

Vamos a aprender a modificar este codigo a nuestro gusto y nos quedara algo mas original y bonito, que es de lo que se trata.

Asi que vamos a hacer de un simple codigo, uno algo mas complejo y vistoso.

<table width="000" border="1" bgcolor="#FFCCFF">
    <tr>
        <td>
            COSAS INTERESANTES PARA TU WEB
        </td>
    </tr>
</table>

Ahora voy a modificar el codigo de manera que se quede a mi gusto, no solo voy a cambiar el texto y el color, sino que voy a añadirle mas cajitas con texto para eso hago lo siguiente.

Copio el codigo original y lo pego debajo del que acabo de poner, y le modifico el texto el color y esta vez tambien el tamaño.

<table width="000" border="1" bgcolor="#FFCCFF">
    <tr>
        <td>
            COSAS INTERESANTES PARA TU WEB
        </td>
    </tr>
</table>

<table width="400" border="1" bgcolor="#FFCC33">
    <tr>
        <td>
            TRUCOS, PROGRAMAS, CODIGOS, AYUDA ON-LINE...
        </td>
    </tr>
</table>

Podemos añadir todas las lineas que queramos, y cambiar el tamaño el texto y el color.

Pero ¿por que no hacemos que en algunas cajitas el texto aparezca en movimiento....?

Vamos a ello.

Para los que leis mi web habitualmente ya sabeis como se pone un codigo con texto en movimiento, es tan sencilo como  poner el texto dentro de las etiquetas <marquee></marquee>, que es lo que voy a hacer ahora con el texto de el codigo, al que quiero que se mueva le pongo delante y detras( de mi texto) <marquee>.

            <marquee>DALE AL BOTON DE ME GUSTA, ME ANIMA A CONTINUAR TRABAJANDO, PARA MEJORAR NUESTRAS WEB</marquee>

Acuerdate que todo el texto que metas entre esas etiquetas saldra en movimiento.

Asi el resultado final de mi codigo seria este..

Ahora ya es cosa vuestra ser mas o menos creativos ya que como veis tiene muchas posibilidades.....

Como todo lo que aqui pongo espero que os guste

<table width="200" border="1" bgcolor="#FFCCFF">
    <tr>
        <td>
            <marquee>PARTICIPA EN MI WEB</marquee>
        </td>
    </tr>
</table>

<table width="400" border="1" bgcolor="#FFCC33">
    <tr>
        <td>
            TRUCOS, PROGRAMAS, CODIGOS, AYUDA ON-LINE...
        </td>
    </tr>
</table>

<table width="600" border="1" bgcolor="#99CC33">
    <tr>
        <td>
            PARTICIPA EN MI WEB PARA OBTENER TU BANNER O FONDO PERSONIFICADO
        </td>
    </tr>
</table>

<table width="800" border="1" bgcolor="#CEE3F6">
    <tr>
        <td>
            <marquee>DALE AL BOTON DE ME GUSTA, ME ANIMA A CONTINUAR TRABAJANDO, PARA MEJORAR NUESTRAS WEB</marquee>
        </td>
    </tr>
</table>

<table width="400" border="1" bgcolor="#CC99FF">
    <tr>
        <td>
            GRACIAS POR TU VISITA
        </td>
    </tr>
</table>

Hoy os voy a enseñar como hacer un código para que aparezcan imagenes decorando nuestra pagina.
Lo primero que hacemos es seleccionar la imagen que vamos a poner en el código yo he elegido una de unos ojos rojos.
Como ya os he explicado muchas veces, para saber la dirección URL de una foto tiene que estar on-line.
Es decir tiene que estar publicada en internet, si es una foto propia la subimos a nuestra web y si no la alojamos en un hosting de imagenes ( jimdo hace poco nos ofrecía uno se llama Dropbox), te da la opción de hospedar la foto al subir una imagen.
Una vez la foto en linea, ponemos el ratón encima le damos al lado derecho y te aparece la dirección URL de la foto.
Dicho esto vamos al código
Vamos a poner todo el contenido del código entre el atributo div ' asi que el código es
<div style="text-align: center;">
    <a href="" style="center: 0px; position: fixed; top: 0px;"><img src="" alt=
    "" /></a>
</div>
Aqui lo que he puesto es el estilo del código, su tamaño, su posición, pues vamos a completarlo juntos.
img src="" alt( entre las comillas no hay nada y hay tenemos que poner la dirección url de la foto o gif que ya tengamos decida en mi caso es esta.
http://u.jimdo.com/www30/o/sd503c4244c1edaa9/img/i8f8eee6f1b8fb780/1308235790/std/image.gif
Y así me quedaría el código
<div style="text-align: center;">
    <a href="" style="center: 0px; position: fixed; top: 0px;"><img src="http://u.jimdo.com/www30/o/sd503c4244c1edaa9/img/i8f8eee6f1b8fb780/1308235790/std/image.gif" alt=
    "" /></a>
</div>
Vale, ahora vamos a darle en enlace a nuestro código, como lo hacemos????, pues muy sencillo pones la dirección url de tu web a la dirección que quieras que vayan cuando pinchen en la imagen
La mía es http://meriyo.jimdo.com/, así que esto lo tengo que poner a href="" style ( dentro de las comillas).
Así el codigo completo
<div style="text-align: center;">
    <a href="http://meriyo.jimdo.com/" style="center: 0px; position: fixed; top: 0px;"><img src="http://u.jimdo.com/www30/o/sd503c4244c1edaa9/img/i8f8eee6f1b8fb780/1308235790/std/image.gif" alt=
    "" /></a>
</div>
Pero no os parece un poco sencillo?????.
Vamos a hacerlo diferente y mas original.Ahora voy a cambiar la posición y el tamaño
<div style="text-align: left;">
    <a href="http://meriyo.jimdo.com/" style="left: 0px; position: fixed; top: 0px;"><img src="http://u.jimdo.com/www30/o/sd503c4244c1edaa9/img/i8f8eee6f1b8fb780/1308235790/std/image.gif" alt=
    "" /></a>
</div>
Una mas

<div style="text-align: right;">
    <a href="http://meriyo.jimdo.com/" style="right: 50px; position: fixed; top: 50px;"><img src="http://u.jimdo.com/www30/o/sd503c4244c1edaa9/img/i8f8eee6f1b8fb780/1308235790/std/image.gif" alt=
    "" /></a>
</div>
Puedes repetir esta accion todas las veces que quieras que aparezca la imagen, y en un mismo codigo puedes poner diferentes imagenes

<div style="text-align: left;">
    <a href="http://meriyo.jimdo.com/" style="left: 0px; position: fixed; top: 0px;"><img src="http://u.jimdo.com/www30/o/sd503c4244c1edaa9/img/i8f8eee6f1b8fb780/1308235790/std/image.gif" alt=
    "" /></a>
</div>

<div style="text-align: right;">
    <a href="http://meriyo.jimdo.com/" style="right: 50px; position: fixed; top: 50px;"><img src="http://u.jimdo.com/www30/o/sd503c4244c1edaa9/img/i8f8eee6f1b8fb780/1308235790/std/image.gif" alt=
    "" /></a>
</div>

Ya os he explicado como hacer un sencillo codigo de texto en moviniento utilizando  la etiqueta <marquee </marquee>.

Bueno pues hoy vamos a darle un poco de color a nuestro texto, lo que voy ha hacer es añadir un par de etiquetas mas al codigo para darle un aspecto diferente.

<marquee scrolldelay="700" scrollamount="400">
<font color="red"><b>Texto en forma de blink</b></font>
</marquee>

Lo que he hecho es cambiarle el movimiento y el color añadiendo lo que esta en rojo, asi quedaria de esta manera.

Ahora solo  es modificar el movimiento y el color, asi se puede poner como mejor nos quede en nuestra web,  os enseño como queda el codigo modificado y no olvideis que el nombre de los colores tienen que ponerse en ingles.

<marquee scrolldelay="900" scrollamount="700"><font color="black"><b>GRACIAS POR VISITAR MI WEB</b></font></marquee>

Sin salirmos de la ETIQUETA marquee, vamos a cambiar un poco el codigo.

<marquee behavior="" direction="down" scrollamount="1" height="10"><font color="magenta">HOLA A TOD@S LOS QUE VEIS MI WEB</font></marquee>

Lo que he hecho es añadir la posicion del texto, si queremos que vaya en otra posicion , solo debemos modificar esto (down), por la posicion que nos interes por ejemplo arriba seria ( up)  y cambiar su movimiento y su color. y ahora lo que voy a hacer es cambiarle el efecto a texto parpadenate solo modificando eso (scrollamount="1), cuanto mas aumentes el munero mas rapido ira el texto

<marquee behavior="" direction="up" scrollamount="6" height="20"><font color="blue">aqui tu texto</font></marquee>

Los que tenemos una web Jimdo tenemos la suerte de poder subir imagenes solo con el menu de edicion, al igual que poner enlaces, subir textos o elementos en flash.

Eso en mi caso que yo uso Jimdo como servidor de mi web, nos hace un poco comodones y muchas veces nos quedamos con las opciones que nos da la pagina.

Pero si yo quiero una imagen propia que enlace en mi web, y si quiero un texto diferente para mis titulos, y si quiero un enlace en mi titulo, y si y si......,

Voy a hacer algo diferente con mi web y para eso lo primero que tengo que saber es como hago una imagen en html.

<img src="URL DE LA FOTO" alt="" />

Ese es el codigo, an sencillo y facil como esto, acordaos que cuando en un codigo veias img ( es la etiqueta para la imagen), un poquito mas adelante cuando ya sepamos hacer codigos sencillos os explicare los atributos basicos para darles estilos diferentes a las imagenes en HTML.

Asi que ahora vamos con algo sencillito.

Pongo la foto en html

<a href="Url de donde quieras enlazar la foto/"></a>

Ya solo nos queda unir los dos codigos y tendremos una imagen enlazada con un codigo html, que podemos dejar visible en nuestra web para que nos enlacen, si pinchas en la foto veras que te lleva a otra web

<a href="URL DE LA WEB"><img src="URL DE LA IMAGEM" alt="" /></a>
 

Algunas veces , cuando piensas en algo que te gustaría hacer para tu web, y no encuentras la manera y la explicaciones que vemos ( no es que estén mal), pero al no saber mucho, no nos enteramos de NA de NA, es ahí cuando dices, " lo voy a hacer yo", y vas a por uvas y te coges manzanas, pues esta es la historia de este código, que no esta hecho para este fin, pero como no me salia lo que quería hacer, pensé....., pero mira que chulo queda así......Después del rollo, el código

Mi ya amigo, Juan Carlos que tiene una web Jimdo en la que esta trabajando mucho (http://iglesiadedioshaina.jimdo.com/) y además  es super buena gente.

Me ha preguntado como pone imagenes en html en movimiento, así que lo voy a explicar para que sea fácil hacerlo.
Ya sabemos como poner una imagen en html, ya sabemos hacer un banner con imagenes en movimiento y ponerlo con enlace a donde queremos, también sabemos como darle movimiento a un texto, así que esto es tan sencillo como , poner nuestras ya conocidas etiquetas

.<marquee></marquee>

Y entre ellas vamos a poner el código html de la imagen que queramos poner, yo para el ejemplo voy a utilizar esta que esta en gif

<img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i8beb795308ab9de5/1311163294/thumb/image.gif" alt="" />

<marquee><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i8beb795308ab9de5/1311163294/thumb/image.gif" alt="" /></marquee>

Siempre sin salirmos de la etiqueta que estamos utilizando, añadimos el texo que queramos que aparezca en moviento en la foto, le damos otro movimiento( rigth) a la imagen y algo de velocidad

<marquee direction="RIGHT" scrollamount="8"><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/ife420c721b4b0bc0/1319199229/thumb/image.gif" alt="" />TU TEXTO AQUI</marquee>

Para cambiar el texto que aparece en la imagen, podemos añadirle las etiquetas correspondientes, en la seccion de como hago, modifico y edito mi plantilla, podeis ver la cantidad de cosas que podemos hacer con el texto.

Ahora os dejo un ejemplo, juntando varias etiquetas marquee y cambiando el texto

<!-- Inicio enlace meriyo.jimdo.com --><marquee direction="RIGHT"><img src="http://u.jimdo.com/www7/o/s9ef11cd6999540f3/img/i986004112d480ce0/1321138475/thumb/image.gif" alt="" /></marquee><h1>    <marquee hspace="50" vspace="30"><a href="http://meriyo.jimdo.com/codigos/fondo-de-color-de-pagina/" target="_blank"><img src=    "http://u.jimdo.com/www7/o/s9ef11cd6999540f3/img/i621ea60b7e508d1b/1321138475/thumb/image.gif" alt="" /></a><strong><a href="http://meriyo.jimdo.com/codigos/fondo-de-color-de-pagina/" target=    "_red">Sorpresa!!!!</a></strong></marquee></h1><!-- Final enlace meriyo.jimdo.com -->

Un aminagif es una buena , divertida y muy poco pesada en cargar para poner en el encabezado( SE SUBE AL ENCABEZADO DE LAS WEB JIMDO COMO IMAGEN PROPIA), de nuestras paginas, a veces nos complicando subiendo archivos demasiado pesados cuando con un archivo de imagen podemos hacer algo deferente.

Ya os explique en otra de mis paginas como hacerlo, si no lo recuerdas Pincha AQUI, y si quieres banners y encabezados gratis para tu pagina entonce toca pinchar AQUI

Os voy a dejar un sencillo y efectivo codigo para saber cuantas personas estan on.line en cada pagina de tu web.

Solo tienes que copiar y pegar el codigo que os dejo a continuacion al final ( o donde quieras), de cada pagina diferente de tu web.

Podeis encontrar este y mas en esta pagina

Aqui voy a dejar uno de estos truquillos que tanto me gustan ya que permite hacer cosas diferentes con mi web.

Anibal, me pregunto ayer como he hecho la imagen de fondo de mi web y yo os lo voy a explicar a todos , pero con especial cariño a el que desde casi el principio de esta web me ha apoyado con sus comentarios.

Asi que como dicen los toreros.....

Va por usted

<style type="text/css">
/*<![CDATA[*/
<!--

.body {background-image: url(http://jpg); }

-->
/*]]>*/
</style>

Seguro que ya lo habreis visto porque este codigo es facil de encontar, pero que significa y como lo amoldo a mis necesidades, siempre que veais el termino background debemos saber que es el atributo que se utiliza en HTML, para establecer la imagen de fondo ya que dicho atributo, indicaremos la ruta donde esta el archivo (URL)

Tan sencillo y fácil como cambiar la ruta del archivo de un formato jpg a un formato gif.

Que en cristiano significa que la url de la imagen la vamos a subir en gif.

Ya os he explicado como hacer una imagen jpg en una gif y como hacer una animagif, si no lo recuerdas PINCHA AQUI

Recordar que la imagen tiene que estar on-line y (YO OS RECOMIENDO)  alojarla en un host de imagenes Jimdo ahora nos ofrece DROPBOX.

Ya tenemos nuestro animagif creado y hospedado, copio la dirección URL de el y la pego donde dice url('http://............jpg'), borro lo que esta en rojo y pongo dentro de los paréntesis la url de mi gif, pego el código en el head ( en Jimdo ajustes, editar hear) y listo, lo veras cuando le des a vista previa.

Ahora os lo demuestro

Vamos a ponerlo en nuestra web, Ajustes, editar head y pegamos el código, y ya estará nuestro fondo en animacion , siempre que la plantilla que usemos nos de a opcion de cambiar de fondo.

La otra manera es desde el css, pero eso es mas complicado y aun no hemos llegado tan lejos, pero si quereis saco un rato y lo explico

<a style="cursor: help">AQUI EL TEXTO QUE DESEES QUE TENGA ESTE EFECTO</a>

En mas de una ocasión me habéis pedido algún código de corazones cayendo por la web, o de nieve,  de estrellas y he puesto en cada apartado el código correspondiente, ahora Angela que tiene un blog muy bonito, me ha pedido un código de lluvia cayendo por la web.Así que como me parece un tema interesante voy a explicar de que manera hacemos para que caigan objetos por la web.

Lo que voy a poner a continuación es el código que usaremos y como ir modificando a nuestro gusto, es un código que empieza  y acaba( como  casi todo que tenga movimiento en html) con la etiqueta <marquee> </marquee>

Añadiendo las etiquetas necesarias para crear un objeto que caiga ( down), en la posición que yo decida, y que su caída y tamaño por la web tenga x sección de caída (px)  y x tamaño (width y heigt) hasta que lugar de la web quiero que baje el objeto), definiendo la velocidad de bajada y el color del objeto

Vamos a probar ahora el código añadiéndole un unicode, resumiendo  (  un unicode es un símbolo para añadir a nuestro código determinados caracteres o iconos, ).Por ejemplo os voy a poner el del efecto de nieve, es solo el unicode ya que para darle el efecto de nieve tendríamos que darle el color blanco

Para ponerlos en tu código solo tienes que copiarlos y pegarlos en el lugar correspondiente que ahora os indicare.

Podéis encontrar mas en  ;    http://www.okelmann.com/homepage/unicode.htm

<marquee behavior="scroll" direction="down" style="position: absolute; left: 100px; top: 0px; width: 36px; height: 700px;" scrollamount="15"><span style="color: #FF0000">♥</span></marquee>

Esta seria la primera linea, así que añadiendo, lineas como esta al código, cambiándole posición, velocidad, color y unicode, hemos hecho el primer código con unicodes de cayendo objetos por la web.Os dejo unas cuantas lineas mas, con unicodes diferentes , diferentes colores, velocidad etc...

Si quieres como en este caso Angeles, hacer un efecto de lluvia, deberemos modificar el código para poder añadir gotas de lluvia.

Yo voy a hacer el ejemplo con unas mariposas

.Lo que hago es cambiar  el lugar donde ponía el unicode ponerle la imagen que yo decida.Así que añado esto al código<img src="AQUI URL DE LA IMAGEN SELECCIONADA" alt="" />

CAMBIO SU TAMAÑO POSICION ETC ETC Y ASI ME QUEDARIA EL CODIGO

<marquee behavior="scroll" direction="down" style="position: absolute; left: 100px; top: 200px; width: 616px; height: 700px;" scrollamount="5"><span style="color: #FF0000"><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i194b470e00022ea3/1302967049/thumb/image.gif" alt="" /></span></marquee> <marquee behavior="scroll" direction="down" style="position: absolute; left: 95px; top: 0px; width: 716px; height: 60px;" scrollamount="7"><span style="color: #fff;"><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i194b470e00022ea3/1302967049/thumb/image.gif" alt="" /></span></marquee><marquee behavior="scroll" direction="down" style="position: absolute; left: 115px; top: 0px; width: 616px; height: 170px;" scrollamount="7"><span style="color: #fff;"><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i194b470e00022ea3/1302967049/thumb/image.gif" alt="" /></span></marquee><marquee behavior="scroll" direction="down" style="position: absolute; left: 116px; top: 5px; width: 816px; height: 570px;" scrollamount="3"><span style="color: #FF0033"><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i194b470e00022ea3/1302967049/thumb/image.gif" alt="" /></span></marquee><marquee behavior="scroll" direction="down" style="position: absolute; left: 132px; top: 515px; width: 816px; height: 600px;" scrollamount="5"><span style="color: #FF9900;"><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i194b470e00022ea3/1302967049/thumb/image.gif" alt="" /></span></marquee> <marquee behavior="scroll" direction="down" style="position: absolute; left: 148px; top: 5px; width: 816px; height: 110px;" scrollamount="2"><span style="color: #fff;"><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i194b470e00022ea3/1302967049/thumb/image.gif" alt="" /></span></marquee> <marquee behavior="scroll" direction="down" style="position: absolute; left: 114px; top: 25px; width: 916px; height: 500px;" scrollamount="7"><span style="color: #339900;"><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i194b470e00022ea3/1302967049/thumb/image.gif" alt="" /></span></marquee> <marquee behavior="scroll" direction="down" style="position: absolute; left: 330px; top: 25px; width: 965px; height: 450px;" scrollamount="7"><span style="color: #FF9900;"><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i194b470e00022ea3/1302967049/thumb/image.gif" alt="" /></span></marquee><marquee behavior="scroll" direction="down" style="position: absolute; left: 246px; top: 15px; width: 716px; height: 430px;" scrollamount="6"><span style="color: #fff;"><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i194b470e00022ea3/1302967049/thumb/image.gif" alt="" /></span></marquee> <marquee behavior="scroll" direction="down" style="position: absolute; left: 312px; top: 55px; width: 716px; height: 400px;" scrollamount="5"><span style="color: #339900;"><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i194b470e00022ea3/1302967049/thumb/image.gif" alt="" /></span></marquee><marquee behavior="scroll" direction="down" style="position: absolute; left: 338px; top: 165px; width: 516px; height: 410px;" scrollamount="2"><span style="color: #CC00CC;"><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i194b470e00022ea3/1302967049/thumb/image.gif" alt="" /></span></marquee> <marquee behavior="scroll" direction="down" style="position: absolute; left: 354px; top: 35px; width: 916px; height: 460px;" scrollamount="7"><span style="color: #33CC33"><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i194b470e00022ea3/1302967049/thumb/image.gif" alt="" /></span></marquee><marquee behavior="scroll" direction="down" style="position: absolute; left: 910px; top: 5px; width: 816px; height: 100px;" scrollamount="1"><span style="color: #fff;"><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i194b470e00022ea3/1302967049/thumb/image.gif" alt="" /></span></marquee><marquee behavior="scroll" direction="down" style="position: absolute; left: 570px; top: 5px; width: 716px; height: 110px;" scrollamount="7"><span style="color: #fff;"><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i194b470e00022ea3/1302967049/thumb/image.gif" alt="" /></span></marquee><marquee behavior="scroll" direction="down" style="position: absolute; left: 620px; top: 5px; width: 616px; height: 160px;" scrollamount="7"><span style="color: #fff;"><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i194b470e00022ea3/1302967049/thumb/image.gif" alt="" /></span></marquee><marquee behavior="scroll" direction="down" style="position: absolute; left: 300px; top: 0px; width: 716px; height: 100px;" scrollamount="1"><span style="color: #fff;"><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i194b470e00022ea3/1302967049/thumb/image.gif" alt="" /></span></marquee><marquee behavior="scroll" direction="down" style="position: absolute; left: 890px; top: 0px; width: 816px; height: 200px;" scrollamount="5"><span style="color: #fff;"><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i194b470e00022ea3/1302967049/thumb/image.gif" alt="" /></span></marquee><marquee behavior="scroll" direction="down" style="position: absolute; left: 840px; top: 10px; width: 616px; height: 100px;" scrollamount="7"><span style="color: #fff;"><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i194b470e00022ea3/1302967049/thumb/image.gif" alt="" /></span></marquee>

 A mi es un efecto que  me gusta mucho ya que podemos hacer que caigan diferentes imagenes a la vez,e incluso  texto, así que empezar a hacer cosas divertidas y porque no originales para nuestras web y blog.

VER EFECTO DE CORAZONES CAYENDO POR LA WEB

Para obtener este efecto solo tenéis que quitar la imagen o el unicode y añadirle el texto que queráis.