viernes, 1 de febrero de 2008

PON LOS LINKS EN UNA MARQUESINA EN MOVIMIENTO

Hoy os voy a poner un pequeño truco con el que poner nuestros enlaces a otros blogs en una marquesina con movimiento (tipo la Guerra de las Galaxias,jajaja) pero con una variante….si nosotros colocamos el puntero sobre la marquesina, ésta se detiene, así podremos ver la imagen del link bien.

En otros post os hablé de marquesinas para texto, para fotos, pero sin que se pudiera detener con el puntero, hoy la novedad es esa.

Para ello copiamos el siguiente código html en un elemento de página, por ejemplo, en HTML/Javascript:

<marquee direction="up" scrollAmount="1" style="background- text-align: center; width:150px;height:150px;border:1px solid #000000;padding:3px" onMouseover="this.scrollAmount='0'" onMouseout="this.scrollAmount='2'">
<a href="URL DEL ENLACE" title="TÍTULO"><img src="URL DE LA IMÁGEN"</a> <br>
<a href="URL DEL ENLACE" title="TÍTULO"><img src="URL DE LA IMÁGEN"</a> </marquee>


Os comento algunas cosillas:

- Os he puesto un tamaño de 150x150px pero podeis poner el que querais, de hecho en mi sidebar la marquesina que he colocado es de 200x150.
- Los bordes ya sabeis que podeis variarlos, tanto en color, como en grosor…colocad el que más os guste.
- La parte de title la podeis suprimir si quereis.
- La velocidad con la que quereis que se mueva la marquesina la podeis variar, yo he puesto 1 (en scrollamount) porque es la velocidad más baja, pero podeis aumentarla poniendo un dígito mayor.
- Podemos cambiar la dirección en la que se mueve la marquesina, en vez de hacia arriba (up) hacia abajo, o hacia la derecha, o hacia la izquierda. Esto lo cambiamos donde pone marquee direction

Una cosilla más, al igual que estamos haciendo esto con los links, podemos hacerlo con fotografías, el proceso sería el mismo, pero suprimiendo el url del enlace puesto que no queremos que nos lleve a ninguna página, sólo que nos muestre las imágenes.

Y como siempre, os pongo un ejemplito, que es la mejor forma de entenderlo:






2 comentarios:

Serenity dijo...

Excelente!!
Lo estaba buscando, muy claro.
Gracias!!

Paula Huerta C. dijo...

muchas gracias funciona perfectamente.