Página Principal Menú Charkleons Radio Online Facebook - Charkleons.com YouTube - Charkleons.com Twitter - Charkleons.com

Imágenes o Banners con movimiento

Imágenes o Banners con movimiento - Charkleons.comImágenes o Banners con movimiento - Charkleons.comImágenes o Banners con movimiento - Charkleons.comImágenes o Banners con movimiento - Charkleons.com

Si lo que quieren hacer es un gif animado de un video visiten el siguiente TEMA.

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="10" 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 ="200px" width="200px"/></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 ="200px" width="200px" /></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.

Si quieren dejar uno o más espacios entre las imágenes usen lo siguiente por cada espacio que quieran agregar: &nbsp; 

Ejemplo dentro del código:

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

El código puede contener varias partes.

Explicación de las partes

El movimiento o tipo de desplazamiento se maneja con Behavior 

Behavior  Si no se agrega un behavior al código se visualizará como si tuviera el efecto scroll. Hay tres behavior: behavior="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="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> 
-----------------------
<marquee behavior="alternate"  scrolldelay="1" scrollamount="2" direction="left" loop="infinite" onmouseout="this.start()" onmouseover="this.stop()"><a href="URL que Redirecciona al tema 1target="_blank"><img title="Titulo de la entrada" alt="Titulo de la entrada" src="URL de la imagen 1" height ="200px" width="200px"/></a>&nbsp;&nbsp;<a href="URL que Redirecciona al tema 2target="_blank"><img title="Titulo de la entrada" alt="Titulo de la entrada"  src="URL de la imagen 2" height ="200px" width="200px" /></a></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.

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.

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.

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 ="200px" width="200px". 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.

Movimiento para el texto

También podemos usar este efecto con el texto, el código sería más simple, por ejemplo:

Texto lento

Texto un poco más rápido

Texto rápido

Texto muy rápido

------------------

<marquee behavior="scroll" direction="up" scrollamount="1">Texto lento</marquee>

<marquee behavior="scroll" direction="right" scrollamount="12">Texto un poco más rápido</marquee>

<marquee behavior="scroll" direction="left" scrollamount="20">Texto rápido</marquee>

<marquee behavior="scroll" direction="right" scrollamount="40">Texto muy rápido</marquee>

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

Gracias.

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


Cómo se hace para que las imágenes se muevan de un lado a otro, cómo hacer desplazar las imágenes de un lado al otro, tutorial imágenes .jpg con movimiento, movimiento de arriba a abajo para imágenes en html, código html para mover imágenes,

29 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
  2. Hola, ¿Y si quisiera agregar más imágenes, en qué cambia?

    ResponderEliminar
    Respuestas
    1. Hola, gracias por comentar. Para agregar más imágenes solo debes copiar la parte que dice: «URL que redirecciona al tema 1 hasta la parte de URL imagen 1» y pegarlo antes de la etiqueta de cierre del marquee. Repite esto por cada imagen que quieras agregar. Saludos.

      Eliminar
  3. Respuestas
    1. De nada, con el mayor de los gustos. Gracias por comentar. Saludos.

      Eliminar
  4. hola, si quiero agregar imágenes sin URL, puedo?

    ResponderEliminar
  5. Hola, gracias por comentar. Sí, solo debes dejar la parte del img y retirar la de apertura y cierre del (a href) (/a). Saludos.

    ResponderEliminar
  6. Gracias, Dios te bendiga!

    ResponderEliminar
    Respuestas
    1. De nada, con el mayor de los gustos. Muchas gracias a ti por tu comentario, eres muy amable. Saludos.

      Eliminar
  7. De nada, con el mayor de los gustos. Gracias por comentar. Saludos.

    ResponderEliminar
  8. Hola disculp, como podria hacer para que no me aparesca ese espacio en blanco cuando terminan las imagenes.
    osea quiero que sea de rrecorido todas la imagenes sin espacios al final.por favor

    ResponderEliminar
    Respuestas
    1. Hola, gracias por comentar. Para este código no se puede, lo más cercano a lo que comentas sería agregar behavior="alternate" al código para que las imágenes reboten (regresen) cada vez que llegan a un extremo. Disculpa que no te pueda colaborar de una mejor manera. Saludos.

      Eliminar
  9. Hola estimado una consulta como hago para darle espacio entre las imagenes no esten tan cercas.

    ResponderEliminar
    Respuestas
    1. Hola, gracias por comentar. Ya agregué esa parte al tema. Solo debes agregar lo siguiente   en modo HTML, entre cada código de las imágenes. Saludos.

      Eliminar
  10. hola, como hago para que las imagenes se muevan es zig zag? asi de arriba hacia abajo o derecha a izquierda

    ResponderEliminar
    Respuestas
    1. Hola, gracias por comentar. Eso se puede hacer agregando el behavior="alternate" al código. Ya dejé un ejemplo en donde comienza la explicación de las partes. Saludos.

      Eliminar
  11. hOLA BUEN DIA ME ENCANTO MUY BUENA EXPLICACION, PERO COMO PUEDO HACER QUE UNO DE LOS TEXTOS A PARESCA CON EL MOVIMIENTO DE LA IMAGGEN

    ResponderEliminar
    Respuestas
    1. Hola, gracias por comentar. De forma básica no se podría hacer, si se le agrega más codigo ya quedaría cono un slideshow. Yo comparto uno pero no muestra el texto, solo cuando se ubica el puntero del mouse sobre la imagen. Si buscas en Google «slideshow blogger» encontrarás varios estilos que te podrían servir. Disculpa que no te pueda colaborar de una mejor manera. Saludos.

      Eliminar
  12. ¡Gracias! Me fue muy útil, apenas me estoy adentrando en este apartado y realmente me sirvió mucho, nuevamente te agradezco por compartir.

    ResponderEliminar
    Respuestas
    1. De nada, con el mayor de los gustos. Gracias por el comentario. Saludos.

      Eliminar
  13. hola! muchas gracias por los tutoriales!
    podrías ayudarme con una cosa que quisiera poner en mi blog? tambien serían imágenes en movimiento, pero algunas veces he visto en webs que la imagen sube, se detienen un instante (como para que la puedas apreciar) y luego continúa subiendo y pasa la siguiente. ¿sabes cómo se hace esto? no lo encuentro por ningún lado :')

    ResponderEliminar
    Respuestas
    1. Hola, gracias por comentar. Estuve revisando si se ha agregado algún comando nuevo al elemento marquee pero no se ha hecho. No sé si me puedas compartir un ejemplo para ver el código, tal vez se haga con css o javascript. Saludos.

      Eliminar
  14. Hola muy buenos días,.. me gustaría saber como hacer una marquesina de imágenes donde al pasar el mouse se detenga y al hacer click y sostener.. puedas desplazar esas imágenes a la izquierda o derecha. Gracias bro..

    ResponderEliminar
  15. Hola, gracias por comentar. Tal vez el tema de este enlace te pueda ser útil, es un slideshow responsive, es decir, que sirve también para dispositivos móviles » https://www.charkleons.com/2014/08/slideshow-touch_3.html Saludos.

    ResponderEliminar
  16. Muchas gracias. Excelente

    ResponderEliminar
  17. Para cambiar el tamaño de la letra en los textos con movimiento que instrucción podemos incorporar?

    ResponderEliminar
  18. Otra pregunta. he tratado de cambiar el ancho y largo de las imágenes pero no los toma, cual es la razon?. Muchas gracias por compartir.

    ResponderEliminar
    Respuestas
    1. Hola, gracias por comentar. Lo del tamaño de la letra lo puedes hacer desde los comandos de Blogger, es decir, en modo redactar puedes escribir el texto y desde ahí aumentarle el tamaño a la fuente, luego pasas a modo Vista en HTML y lo puedes seguir cambiando y luego copiarlo y pegarlo en el código que estés usando. Lo del tamaño de las imágenes no te sabría decir a qué se deba, de pronto sería que hubiera dos medidas, al subir una imagen a blogger en el código muestra hasta cuatro medidas, las que dejamos y la de la imagen original, habría que revisar sí tal vez sea eso y dejar solo un width y un heigth. Saludos.

      Eliminar

Gracias por comentar.