Les voy a mostrar cómo se hace una fila de imágenes con movimiento, a las cuales al hacer clic sobre ellas, se es redirigido a su contenido. Esto se puede usar en las columnas o en una parte horizontal del diseño de la plantilla, dependiendo de las partes que usen.
Para ello vamos a usar el código <marquee> </marquee> el cual iría dentro de un gadget HTML / Javascript. La ruta sería: Diseño / Añadir 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="1" » Lento
scrolldelay="200" » Rápido
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á como si flash estuviera corriendo jejeje.
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). Se deben usar ambos, ya que los navegadores, o leen ambos, o leen solo uno. Ejemplo:
alt="Titulo de la Entrada" title="Titulo de la Entrada"
El alt= Lo usa el internet explorer y el title= lo usan o leen el resto de navegadores.
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"
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.
En Opera no funciona bien el gadget porque ellos no usan ese código (marquee), y en internet explorer si sale mal es porque ese navegador es lo peor del mundo XD. En Chrome, Safari y Mozilla trabaja perfecto.
Espero que esta información les sea muy útil.
No hay comentarios:
Publicar un comentario