ENLACES Y IMÀGENES EN MOVIMIENTTO
El truco que vamos a tocar hoy, es para colocar Imágenes, logos, banners, o links en movimiento tipo marquesina, y hará que el link o la imagen se detenga al pasar el cursor por encima, lo haremos de dos formas diferentes, una para las imágenes y otra para los enlaces que insertes en dicha caja tipo marquesina.
Ahora, aquí tenéis los codecs.
Para poner los Links con Imagenes este es el codigo que teneis que usar.
<marquee direction="up" style="text-align: center; width:200px;height:150px;border:1px solid #ccc;padding:3px" scrollamount="1" onMouseOver="this.stop()" onMouseOut="this.start()">
<a href="URL del enlace 1"><img src="URL de la imagen 1"/></a><br/>
<a href="URL del enlace 2"><img src="URL de la imagen 2"/></a><br/>
<a href="URL del enlace 3"><img src="URL de la imagen 3"/></a>
</marquee>
<a href="URL del enlace 1"><img src="URL de la imagen 1"/></a><br/>
<a href="URL del enlace 2"><img src="URL de la imagen 2"/></a><br/>
<a href="URL del enlace 3"><img src="URL de la imagen 3"/></a>
</marquee>
Y este es el resultado
Y este para los Links con texto
<marquee direction="up" style="text-align: center; width:200px;height:150px;border:1px solid #ccc;padding:3px" onMouseOver="this.stop()" onMouseOut="this.start()" scrollamount="1" >
<a href="URL del enlace 1">Nombre del enlace 1</a><br/>
<a href="URL del enlace 2">Nombre del enlace 2</a><br/>
<a href="URL del enlace 3">Nombre del enlace 3</a>
</marquee>
<a href="URL del enlace 1">Nombre del enlace 1</a><br/>
<a href="URL del enlace 2">Nombre del enlace 2</a><br/>
<a href="URL del enlace 3">Nombre del enlace 3</a>
</marquee>
Y este es el resultado
Y ahora os hare cinco centimos para hacer las modificaciones pertinentes.
Debes cambiar los datos resaltados en los dos códigos mostrados.
marquee direction="up"es la dirección a donde se mueve, up arriba, down abajo, right derecha, left: qué es izquierda. Son los movimientos en Ingles.
width:200px;height:150px; es el tamaño del cuadro, o la imagen que vayas a poner .
border:1px solid #ccc; es el ancho del borde y el color del borde.
scrollamount="1" es la velocidad con la que se mueven los links, números más altos dará mayor velocidad.
si quereis mas imagenes o mas enlaces solo teneis que añadir esta linea a continuacion.
Esta para las Imagenes.
<a href="URL del enlace "><img src="URL de la imagen "/></a><br/>
Y esta para el de Texto
<a href="URL del enlace ">Nombre del enlace </a><br/>
Ponerlo antes del </marquee> Final.
Fecha:06/10/2017
Publicado por:
0 comentarios