Regresar a la página www.ComoCrearTuWeb.com
Página 1 de 4 1234 ÚltimoÚltimo
Resultados 1 al 15 de 59

Tema: ROTACIÓN PARA TUS IMÁGENES (PASO A PASO)

  1. #1
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    21 ago, 08
    Mensajes
    430
    Poder de Reputación
    16

    ROTACIÓN PARA TUS IMÁGENES (PASO A PASO)

    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í:

    [img]objetos/imagenuno.jpg[/img]

    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,

    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,
    ATRÉVETE A VIVIR SIN VIOLENCIA

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 dic, 07
    Ubicación
    Valencia (España)
    Mensajes
    1,720
    Poder de Reputación
    23
    Hola:

    Gracias por el aporte. Como estas avanzando con la web eh amiga

    Saludos

  3. #3
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    21 ago, 08
    Mensajes
    430
    Poder de Reputación
    16
    jajajajj Hola Kimapa, sucede que uno da lo que recibe y por aquí, recibí mucho así que es una forma de agradecimiento. Solo espero que sirva este script a los demás compañeros.

    saludos, (gracias por analytics)
    ATRÉVETE A VIVIR SIN VIOLENCIA

  4. #4
    Recien Llegado! Merodeador
    Fecha de Ingreso
    31 jul, 09
    Mensajes
    9
    Poder de Reputación
    0

    Acabo de aplicarlo

    Hola acabo de aplicar tu scrip, y no me funciona, he copiado tal cual y6 modificado las rutas pero no me funiona.
    Gracias

  5. #5
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    21 ago, 08
    Mensajes
    430
    Poder de Reputación
    16
    hola,

    por favor, mándame los códigos de lo que has hecho para ver dónde está la falla.
    ATRÉVETE A VIVIR SIN VIOLENCIA

  6. #6
    Recien Llegado! Merodeador
    Fecha de Ingreso
    31 jul, 09
    Mensajes
    9
    Poder de Reputación
    0
    Cita Iniciado por peugeot
    hola,

    por favor, mándame los códigos de lo que has hecho para ver dónde está la falla.
    Gracias por tú atención, se me olvido postear que ya lo solucioné, he estado todo el día que te pego y al final lo he conseguido que funcione.

    El problema era que me descolocaba, la posición del lugar asignado para el logo.

    Perdon por no rectificar mi solicitud de ayuda.

    Salu2.

  7. #7
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    21 ago, 08
    Mensajes
    430
    Poder de Reputación
    16

    Re: ROTACIÓN PARA TUS IMÁGENES (PASO A PASO)

    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,
    ATRÉVETE A VIVIR SIN VIOLENCIA

  8. #8
    Me va gustando esto... Habitante
    Fecha de Ingreso
    24 ago, 09
    Mensajes
    258
    Poder de Reputación
    0
    Hola, gracias por el aporte, es muy bueno, no lo probé pero digo yo que funcciona, hace mucho que tenia la curiosidad de como se hace esto, gracias otra vez. Si tienes más scripts, postealos

  9. #9
    Recien Llegado! Merodeador
    Fecha de Ingreso
    27 jul, 09
    Ubicación
    mi pc
    Mensajes
    8
    Poder de Reputación
    0
    hola, esta bien explicado, justo como a mi me gusta jejeje

    gracias bro por tu aporte.

  10. #10
    Me va gustando esto... Habitante
    Fecha de Ingreso
    29 dic, 09
    Ubicación
    Barcelona (Venezuela)
    Mensajes
    68
    Poder de Reputación
    13

    Re: ROTACIÓN PARA TUS IMÁGENES (PASO A PASO)

    Cita Iniciado por peugeot
    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í:

    [img]objetos/imagenuno.jpg[/img]

    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,

    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,
    Antes que nada disculpame por haber re-abierto este tema tan viejo, pero es que tengo un grave problema con este script tuyo, que la verdad no me funciona con firefox a que se debera este atropello tan feo? xD. al explorador o que necesita el script alguna pagina con una extension en especial osea html o php me podria responder porfas?

  11. #11
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    21 ago, 08
    Mensajes
    430
    Poder de Reputación
    16
    Hola amigo,

    hombre, no tienes que disculparte por nada, mucho menos por haber re-abierto el tema que para eso mismo es el foro!!!

    El script funciona perfectamente en todos los navegadores incluyendo el firefox. Lo que puede suceder es que no tengas habilitado en tu navegador javascript o por allí va tu problema. Para el firefox, tengo entendido, hay que instalar un plugin NOSCRIPT http://noscript.net/ para ver los scripts. Como te digo, pueda que por allí esté tu problema. Ojalá, alguien más pudiera complementar este dato.

    Ahora, en mi index ya tengo otro script para la rotación de imágenes. La diferencia entre el script actual y el que dice las instrucciones arriba en el primer post, es simplemnte que al pasar de una imagen a otra se ve como... mmm... no sé... un difuminado, hay una transición entre una imagen y otra que a mí me gusta más.

    Y en cuanto a códigos, este nuevo script es muy sencillo. Prometo en los próximos días, con un poco más de tiempo, poner la explicación de cómo hacer este nuevo script paso a paso por supuesto. Así, se podrá elegir entre los dos.

    saludos,
    ATRÉVETE A VIVIR SIN VIOLENCIA

  12. #12
    Me va gustando esto... Habitante
    Fecha de Ingreso
    02 jun, 07
    Mensajes
    251
    Poder de Reputación
    17
    Hola peugeot.

    No había visto el tuto que hiciste, me parece recontra interesante, lo voy
    a seguir aer si me sale, ya te estaré dándote lata con artas preguntas je

    Salu2

  13. #13
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    21 ago, 08
    Mensajes
    430
    Poder de Reputación
    16
    Hola compañero,

    gué gusto de verte, digo, de leerte y que te hayas animado a hacer el script, cualquier cosa, por aquí estamos, quizás no entre todos los días pero, tampoco me desaparezco.

    Saludos.
    ATRÉVETE A VIVIR SIN VIOLENCIA

  14. #14
    Me va gustando esto... Habitante
    Fecha de Ingreso
    19 oct, 08
    Ubicación
    Córdoba, Argentina.
    Mensajes
    131
    Poder de Reputación
    14
    voy a ver si funciona! me viene de 10 este script
    Gracias

  15. #15
    Me va gustando esto... Habitante
    Fecha de Ingreso
    19 oct, 08
    Ubicación
    Córdoba, Argentina.
    Mensajes
    131
    Poder de Reputación
    14
    ya lo probe y no me funciona! me sale una imagen abajo de la otra.
    Aca te dejo el codigo html para ver si alguien me puede ayudar:



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Title</title>
    <meta name="robots" content="index, follow">
    <meta http-equiv="Content-Language" content="es">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="style.css" rel="stylesheet" type="text/css">


    <script language="javascript">
    step=0;
    function autoImgFlip() {
    if (step < 3) {step++;}
    else {step=0;}
    if (step==0)
    {a.src="images/imagen2.PNG";}
    if (step==1)
    {a.src="images/imagen3.PNG";}
    setTimeout("autoImgFlip()", 2000);
    if (step==2)
    {a.src="images/imagen4.PNG";}
    if (step==3)
    {a.src="images/imagen5.PNG";}


    }
    </script>

    </head>

    <body onLoad="autoImgFlip();">

    <div align="center">


    [img]images/imagen2.PNG[/img]
    [img]images/imagen3.PNG[/img]
    [img]images/imagen4.PNG[/img]
    [img]images/imagen5.PNG[/img]

    </div>
    </body>
    </html>

Temas Similares

  1. CREAR UN CUADRO CON LAS IMAGENES DEL CURSO PASO A PASO
    Por Kangui en el foro Foro General
    Respuestas: 3
    Último Mensaje: 10/02/2010, 16:19
  2. para cuando las siguientes partes del curso paso a paso
    Por invited83 en el foro Foro General
    Respuestas: 1
    Último Mensaje: 08/10/2009, 22:15

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •