Amanda me pedía que explicase cómo se hacía ua marquesina, que para explicar brevemente lo que es......se trata de una tabla muy básica que consta de una casilla con una columna, es decir, tan sólo hacemos una celda. Pero el añadido que tiene es el movimiento, de ahí que en vez de usar los códigos “table” de una tabla, se use el de “marquee”, es decir, marquesina.
Aquí iré pasito por pasito, piano piano, para que no os perdais.
El código completo que usaremos es el siguiente, si la queremos usar para poner botones que enlazan otras webs sería este código:
| <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> |
Desde que comienza el código “marquee” hasta que termina nos encontramos por medio mil cosas que os detallo a continuación:
- “marquee direction” es la dirección del movimiento. Puede ser hacia arriba (up) o hacia abajo (behind) o hacia la derecha (right) o hacia la izquierda (left)
- “scrollAmount” nos indica la velocidad de ese movimiento. Podemos variar desde el 1 al dígito que queramos. Cuanto mayor sea el número, más rápido se moverá.
- “text-align” nos indica a qué lado se colocan las imágenes en esa tabla, bien centradas (center) como a la derecha (right) como a la izquierda (left)
- “width” nos indica el ancho de la tabla que se marca en píxeles. Y “height” nos indica el alto de la tabla también marcada en píxeles.
- “border” nos indica el grosor del borde de la tabla. Si ponemos 0 no habrá borde, será transparente , y si ponemos un número….a mayor número, mayor grosor.
- “solid” nos indica el color de ese borde. Teneis que poner el código html del color seleccionado.
Si poneis el puntero de vuestro ratón sobre la tabla, vereis como se para el movimiento, dejando así ver el link que haya y que podamos pincharlo.
Si solo quisiéramos hacerlo con imágenes, deberíamos colocar la dirección en la que se alojan y hacer la tabla de la misma manera que antes. No tiene ninguna dificultad.
Es decir, usando el código html "img". Podemos combinar con la alineación (center, left, right). Básicamente, el código es así:
<ALINEACIÓN><img src="http://DIRECCIÓN DE LA IMÁGEN"></ALINEACIÓN>
Decir que a las imágenes se les puede añadir un tamaño con width y heigh y más cosas, pero bueno, partid de lo básico.
