Hola a todos,
Ya que tanto he recibido de CCTW, hoy quiero aportar un granito de arena. Por eso, aquí, les enseño paso a paso a hacer este excelente script (hacer clic en www.celuladeoracion.com para ver el script).
Se llama rotación de imágenes y consta de 4 pasos:
1. En la web que nos sirve de ejemplo aparecen 7 imágenes pero, nosotros solo vamos a ponerle 4 para simplificar; después, ponemos el número de imágenes a nuestro gusto. Eso sí, las 4 imágenes deben tener el mismo tamaño y debemos guardarla en una misma carpeta; digamos, dentro de la carpeta “objetos” si hemos seguimos el curso de Jorgens y las llamaremos imagenuno.jpg, imagendos.jpg, imagentres.jpg e imagencuatro.jpg.
2. Ponemos el script justo arriba de la etiqueta de cierre del head de la siguiente forma:
<script language="javascript">
step=0;
function autoImgFlip() {
if (step < 3) {step++;}
else {step=0;}
if (step==0)
{a.src="objetos/imagenuno.jpg";}
if (step==1)
{a.src="objetos/imagendos.jpg";}
setTimeout("autoImgFlip()", 3000);
if (step==2)
{a.src="objetos/imagentres.jpg";}
if (step==3)
{a.src="objetos/imagencuatro.jpg";}
}
</script>
</head>
Aquí, ojo con lo siguiente:
-El cero, “0”, también cuenta, así que si tenemos 4 imágenes, las contaremos 0,1, 2, 3.
-Se debe poner la ruta completa de la imagen, por ejemplo, si están dentro de la carpeta “objetos” entonces pondremos:
{a.src=”objetos/imagenuno.jpg”;}
-El tiempo de rotación se define en la línea que dice setTimeout… Si queremos que las imágenes roten rápido le pondremos 1000 y durarán un segundo o 500 o 200. Si queremos que roten más lento ponemos 3000 y durarán 3 segundos como en la web que nos sirve de ejemplo (hasta puedes contar la exactitud!!!) Si se desea que la imagen se vea 4 segundos, se pondrá 4000 y así sucesivamente.
3. Ahora, ponemos esta línea de código justo en la etiqueta de apertura del body y quedaría así:
<body bgcolor="#ffffff" TEXT="#000000" link="#0000cd" vlink="#0000cd" alink="#ff0000" onLoad="autoImgFlip();">
4. Y por último, ponemos el nombre de nuestra primera imagen en la capa donde irán las imágenes así:
[contenido no disponible]
Es un excelente script que le da movimiento a nuestra web sin necesidad de saber o tener algún programa de animación. Si tienen algún problema para configurarlo, por favor, dejen un mensaje aquí mismo para solucinarlo o comenten qué tal les ha parecido. Saludos, :wink:
Hola a todos nuevamente,
estoy re-editando este post porque se pueden mejorar los códigos. En el punto 3 puse:
3. Ahora, ponemos esta línea de código justo en la etiqueta de apertura del body y quedaría así:
<body bgcolor="#ffffff" TEXT="#000000" link="#0000cd" vlink="#0000cd" alink="#ff0000" onLoad="autoImgFlip();">
Esta línea de código se puede simplificar de tal modo que quedaría así:
<body onLoad="autoImgFlip();">
Mucho mejor no??? Y bueno, comenten qué tal les parece el script, no cuesta nada. saludos, :wink:
Ya que tanto he recibido de CCTW, hoy quiero aportar un granito de arena. Por eso, aquí, les enseño paso a paso a hacer este excelente script (hacer clic en www.celuladeoracion.com para ver el script).
Se llama rotación de imágenes y consta de 4 pasos:
1. En la web que nos sirve de ejemplo aparecen 7 imágenes pero, nosotros solo vamos a ponerle 4 para simplificar; después, ponemos el número de imágenes a nuestro gusto. Eso sí, las 4 imágenes deben tener el mismo tamaño y debemos guardarla en una misma carpeta; digamos, dentro de la carpeta “objetos” si hemos seguimos el curso de Jorgens y las llamaremos imagenuno.jpg, imagendos.jpg, imagentres.jpg e imagencuatro.jpg.
2. Ponemos el script justo arriba de la etiqueta de cierre del head de la siguiente forma:
<script language="javascript">
step=0;
function autoImgFlip() {
if (step < 3) {step++;}
else {step=0;}
if (step==0)
{a.src="objetos/imagenuno.jpg";}
if (step==1)
{a.src="objetos/imagendos.jpg";}
setTimeout("autoImgFlip()", 3000);
if (step==2)
{a.src="objetos/imagentres.jpg";}
if (step==3)
{a.src="objetos/imagencuatro.jpg";}
}
</script>
</head>
Aquí, ojo con lo siguiente:
-El cero, “0”, también cuenta, así que si tenemos 4 imágenes, las contaremos 0,1, 2, 3.
-Se debe poner la ruta completa de la imagen, por ejemplo, si están dentro de la carpeta “objetos” entonces pondremos:
{a.src=”objetos/imagenuno.jpg”;}
-El tiempo de rotación se define en la línea que dice setTimeout… Si queremos que las imágenes roten rápido le pondremos 1000 y durarán un segundo o 500 o 200. Si queremos que roten más lento ponemos 3000 y durarán 3 segundos como en la web que nos sirve de ejemplo (hasta puedes contar la exactitud!!!) Si se desea que la imagen se vea 4 segundos, se pondrá 4000 y así sucesivamente.
3. Ahora, ponemos esta línea de código justo en la etiqueta de apertura del body y quedaría así:
<body bgcolor="#ffffff" TEXT="#000000" link="#0000cd" vlink="#0000cd" alink="#ff0000" onLoad="autoImgFlip();">
4. Y por último, ponemos el nombre de nuestra primera imagen en la capa donde irán las imágenes así:
[contenido no disponible]
Es un excelente script que le da movimiento a nuestra web sin necesidad de saber o tener algún programa de animación. Si tienen algún problema para configurarlo, por favor, dejen un mensaje aquí mismo para solucinarlo o comenten qué tal les ha parecido. Saludos, :wink:
Hola a todos nuevamente,
estoy re-editando este post porque se pueden mejorar los códigos. En el punto 3 puse:
3. Ahora, ponemos esta línea de código justo en la etiqueta de apertura del body y quedaría así:
<body bgcolor="#ffffff" TEXT="#000000" link="#0000cd" vlink="#0000cd" alink="#ff0000" onLoad="autoImgFlip();">
Esta línea de código se puede simplificar de tal modo que quedaría así:
<body onLoad="autoImgFlip();">
Mucho mejor no??? Y bueno, comenten qué tal les parece el script, no cuesta nada. saludos, :wink: