Imágenes o Banners con movimiento

Imágenes o Banners con movimiento - Charkleons.com


Les voy a mostrar cómo se hace una fila de imágenes con movimiento usando las etiquetas <marquee> </marquee>. Este código lo pueden usar en una entrada (modo HTML) o en un gadget HTML-Javascript.

Un ejemplo del código para una fila con dos imágenes desplazándose de derecha a izquierda sería:

<marquee  scrolldelay="1" scrollamount="2" direction="left" loop="infinite" onmouseout="this.start()" onmouseover="this.stop()"><a href="URL que Redirecciona al tema 1" target="_blank"><img title="Titulo de la entrada" alt="Titulo de la entrada" src="URL de la imagen 1" height ="80px" width="80px"/></a><a href="URL que Redirecciona al tema 2" target="_blank"><img title="Titulo de la entrada" alt="Titulo de la entrada"  src="URL de la imagen 2" height ="80px" width="80px" /></a></marquee>

El target="_blank" se usa para que al hacer clic sobre la imagen, el enlace se abra en otra pestaña o ventana; casi no se usa, ya que por lo general se quiere que se abra un contenido propio de la página.

El código puede contener varias partes.

Explicación de las partes

El movimiento se maneja con Behavior y Scroll.

Scroll hace que las imágenes o el contenido se desplacen como en un círculo, es decir, que sale por un lado, desaparece en el lado opuesto, y vuelve a salir por el primer lado.

Behavior, conozco dos, behavior="alternate" que hace que rebote el contenido de un lado a otro, y behavior="slide" que hace que el contenido comience en un lado y al llegar al otro extremo se detenga.

Ejemplo: <marquee  behavior="alternate"></marquee> 

onmouseout="this.start()" onmouseover="this.stop()"  »»» Esto hace que al colocar el puntero del mouse sobre la imagen, ésta se detenga.

direction=  »»» Esto define el sentido (dirección) en la que se desplazarán las imágenes o el contenido. 

Se usan: 

direction="left" para que se desplace de derecha a izquierda.
direction="right" para que se desplace de izquierda a derecha.
direction="up" para que se desplace de abajo hacia arriba.
direction="down" para que se desplace de arriba hacia abajo.

scrolldelay=  »»» Esto define la velocidad con la que se desplazan las imágenes o el contenido. Cuanto menor sea el número, mayor será la velocidad. Ejemplo:

scrolldelay="200"   » Lento 
scrolldelay="1"   » Rápido 

Esto casi no se modifica ya que lo que le da velocidad realmente es el scrollamount ya que es la distancia que avanza la imagen.

scrollamount=   »»» Esto define la cantidad de píxeles que avanzarán las imágenes o el contenido. Ejemplo:

scrollamount="2"     » Se verá un movimiento normal.
scrollamount="100"     » Se verá muy rápido.

loop=   »»» Esto define si el movimiento se repetirá o no. No es necesario su uso cuando se usa behavior. 

Ejemplo:

loop="10"   » Se repetirá 10 veces.
loop="infinite"   o   loop="-1"   » Se repetirá indefinidamente.

width=  »»» Determina el ancho del área en la que se desplazará el contenido; se maneja en píxeles o en porcentaje. Entonces con un width="200px" la marquesina tendrá esa medida y con un width="50%" si el área donde queremos ubicar el código tiene 900px, solo se usará la mitad 450px.

height=   »»» Similar al width=  Casi no se usa ya que se maneja el alto de las imágenes.


Funciones que se manejan para o con una marquesina:

align=  »»» Su función es indicar la ubicación del contenido (texto o imágenes) dentro del código. Se usan: "top"  (en la parte alta), "middle" (en la parte media) o "bottom" (en la parte baja). Todo esto depende de si el código lleva height y width dentro del <marquee ******> para definir el tamaño de la marquesina; esto casi no se usa, ya que el tamaño lo definimos con el de las imágenes. Ejemplo: align="top"

bgcolor=  »»» Esto define el color de fondo que llevará la marquesina. Ejemplo: bgcolor="#FFFFFF"
Si se omite esta parte, el fondo será transparente.

Extras

Dentro de la parte del link de la imagen <img ******* /> van:

alt= y title=   »»» Permiten que al pasar el puntero del mouse sobre la imagen se visualice una leyenda (texto).  El alt= Lo usa el internet explorer y el title= lo usan o leen el resto de navegadores. Ejemplo:

alt="Titulo de la Entrada" title="Titulo de la Entrada" 

height= y width=   »»» Determinan un tamaño preciso o definido para las imágenes, es decir, si las imágenes que incluya el código tienen diferentes tamaños, con estas partes se les puede designar un mismo tamaño para todas. Ejemplo: height ="80px" width="80px". Si las imágenes tienen las mismas medidas solo será necesario agregar el width, el height los navegadores lo asumen automáticamente. 

Dentro de la parte del link que redirecciona <a href="" ******* > se puede agregar:

target="_blank"    »»» Para que el link se abra en otra pestaña o ventana.

Recuerden que es muy importante tener en cuenta la parte donde se colocará el gadget (una zona horizontal o vertical del diseño de la plantilla), si es en una columna, tener en cuenta el ancho de la misma.

Espero que esta información les sea muy útil.

Gracias.

Imágenes con movimiento - CharkleonsImágenes con movimiento - Charkleons

2 comentarios:

  1. Hola!! Me gustaría saber cómo poner el link de la imagen porque no me funciona, no sé cómo lo tengo que hacer. Gracias.

    ResponderEliminar
    Respuestas
    1. Hola, disculpa la demora en la respuesta, no están llegando los avisos al correo. En el primer ejemplo del código ya dejé la parte de la url de la imagen en color verde. Por ejemplo cuando subes una imagen en una entrada, al pasar a modo HTML verás su url, ya sea en la parte del href o del src, entonces copias cualquiera de las dos url que son las misma, y ya en el código con movimiento debes agregar la url de la imagen en la parte del src, donde dice URL de la imagen. Confirma que al copiarla no lleve comillas, u otra parte porque eso hará que no se visualice, es decir, revisa que esté solo la url con unas comillas al inicio y al final. Cualquier duda me avisas. Saludos.

      Eliminar

Gracias por comentar.

Charkleons.com