Regresar a la página www.ComoCrearTuWeb.com
Página 4 de 4 PrimerPrimer 1234
Resultados 46 al 59 de 59

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

  1. #46
    Me va gustando esto... Habitante
    Fecha de Ingreso
    25 oct, 10
    Ubicación
    Elche, Alicante
    Mensajes
    50
    Poder de Reputación
    11

    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,
    Hola, oye, que he probado tu script pero no me funciona y quiero saber si funciona teniendo yo el script del menú desplegable
    "Todo tonto encuentra otro más tonto que lo idolatra". Sherlock Holmes
    "Los tontos más molestos son los ingeniosos". Sherlock Holmes
    "Más vale callar y parecer tonto que hablar y demostrarlo". No lo sé
    Un saludo

  2. #47
    Recien Llegado! Habitante Avatar de maximoh
    Fecha de Ingreso
    30 sep, 10
    Mensajes
    21
    Poder de Reputación
    11

    No me funciona, ¿una ayudita?

    Hola por aquí.
    estoy creando una web gracias a CCTw.
    La idea fue poner imágenes rotativas para hacerla mas atractiva....no funcionó. Que pena
    Donde pone:
    "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]"
    esa linea vá solita?...o tengo que insertar las imágenes una a una desde las opciones del Html-Kit?
    Las inserté tal como indica el "curso completo paso a paso" de CCTw y se veían una debajo de otra. y cuando puse esa línea solita no mostraba nada.
    Disculpas y muchas gracias.!!

  3. #48
    Recien Llegado! Habitante Avatar de maximoh
    Fecha de Ingreso
    30 sep, 10
    Mensajes
    21
    Poder de Reputación
    11

    Cool Siiiiiiiiii !!!!

    Gracias, Gracias, Gracias......pero MUCHISISISIMAS GRACIAS !!!
    fun-cio-no. (acá en mi sitio local)

  4. #49
    Recien Llegado! Merodeador
    Fecha de Ingreso
    08 mar, 11
    Ubicación
    Mercedes, Uruguay
    Mensajes
    3
    Poder de Reputación
    0
    Hola amigos. Hace tiempo que quiero instalar un rotador de imagenes como este y creo que está muy bueno. Pero estoy teniendo problemas para que me aparezcan las imagenes. Lo primero que no entiendo que al poner el primer codigo que tu dices en el head aparece el wrapper en los estilos css ya configurado con las medidas (las cambio de acuerdo a mis imagenes). Luego dices crear un div en el body (lo creo en una tabla donde quiero que aparezcan las imagenes) y aparece otro wrapper, quiero saber cual de los dos funciona. Luego en la tabla copio el siguiente codigo:
    div class="cf_wrapper">
    <div class="cf_element" id="cf1">[img]imagenes/jpg/avionicono.jpg[/img]</div>
    <div class="cf_element" id="cf2">[img]imagenes/jpg/copaamericaicono.jpg[/img]</div>
    <div class="cf_element" id="cf3">[img]imagenes/jpg/playaicono.jpg[/img]</div>
    <div class="cf_element" id="cf4">[img]imagenes/jpg/valijaicono.jpg[/img]</div>
    </div>
    </div> </div></div>

    Luego copio el codigo al final del body y tambien inserto en la raiz: crossfader.js
    Lo que me sale es en vez de las imagenes en la tabla es la direccion de las imagenes en letras, rotando o sea [img]imagenes/jpg/avionicono.jpg[/img]

    [img]imagenes/jpg/copaamericaicono.jpg[/img]

    [img]imagenes/jpg/playaicono.jpg[/img]

    [img]imagenes/jpg/valijaicono.jpg[/img]

    APARECEN ESTAS ROTANDO, LA DIRECCION PERO NO LAS IMAGENES. ¿cual es el problema?
    Cualquier cosa te mando el codigo completo de mi pagina
    Gracias

  5. #50
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    27 jun, 11
    Mensajes
    1
    Poder de Reputación
    0

    no me funciona

    pongo todo bien pero cuando pongo la ultima linea
    [img]imagenes/electricistavalenciap.jpg[/img]
    no me sale la imagen si no ese texto
    ademas no tengo mucha idea de donde ponerlo.echarme una manita porfa que estoy superatascada

  6. #51
    Me va gustando esto... Habitante
    Fecha de Ingreso
    13 feb, 09
    Mensajes
    34
    Poder de Reputación
    13

    hola tengo una duda

    he insertado los codiigos pero no sale nada, saleun mesnaje de erro de java script en la linea 15, carcter 2, error "a no esta definido:

    ojala me puedas ayudar
    <html>
    <head>
    <title>Anuncia Gratis</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">

    <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";}

    }
    </script>
    </head>
    <body><body onLoad="autoImgFlip();">

    <div id="global">
    <div id="cabecera">
    <div id="logotipo"><a href="index.html"><img src="objetos/imagenuno.jpg" width="170px"
    height="80px" alt="Haz clic aquí para volver a la página de inicio"></a></div>
    <div id="publicidad">Anuncia Gratis</div>
    </div>
    carloncho

  7. #52
    Recien Llegado! Habitual
    Fecha de Ingreso
    22 jun, 11
    Mensajes
    12
    Poder de Reputación
    10
    si super buena onda lo voy a probar y te digo como me fue!! lo que te falto fue que podamos hacer un click y que valla a la seccion de cada imagen, sabrias eso??

  8. #53
    Recien Llegado! Habitante
    Fecha de Ingreso
    29 sep, 11
    Mensajes
    28
    Poder de Reputación
    9

    no me saleeee u.u ayuda xfa

    Olaz, el script se ve wenazo pero no me sale ayudenme xfa
    les dejo mi index.html
    Código HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Script Rotacion xD</title>
    </head>
    
    <body onLoad="autoImgFlip();">
    <script language="javascript" src="llamado.js"></script>
    <div>
    <img src="[img]x.jpg[/img]"> </div>
    </body>
    </html>
    y mi llamado.js
    Código HTML:
    step=0; 
    function autoImgFlip() { 
    if (step < 3) {step++;} 
    else {step=0;} 
    if (step==0) 
    {a.src="x.png";} 
    if (step==1) 
    {a.src="y.png";} 
    setTimeout("autoImgFlip()", 3000); 
    if (step==2) 
    {a.src="z.png";} 
    if (step==3) 
    {a.src="p.png";}
    
    } 
    Q estoi aciendo mal??
    Soy un novato que estoy aprendiendo a montones!
    Visita http://www.carlolinks.comocreartuweb.es

  9. #54
    Recien Llegado! Habitual
    Fecha de Ingreso
    26 ene, 12
    Ubicación
    murcia
    Mensajes
    11
    Poder de Reputación
    9
    me pasó lo mismo que a ti lo solucione poniendo las lineas de debajo del div class="cf_wraper"> de la siguiente forma:

    <div class="cf_element" id="cf1"><img src="imagenes/jpg/avionicono.jpg" height="600" width="800" /></div>

    las lineas de las siguientes fotos de la misma forma.

    Espero que te funcione a mi me ha funcionado. Suerte

  10. #55
    Recien Llegado! Merodeador
    Fecha de Ingreso
    26 nov, 12
    Mensajes
    7
    Poder de Reputación
    0
    Hola!

    Lo siento por retomar este post tan antiguo, pero creo que es el mas facil que hay para estem tema de transicion de imagenes.
    Mi problema es que en la web me sale el [img]objectos/imagenuno.jpg[/img] en vez de las fotos.

    Os pongo lo que tengo escrito:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>NEW EUROPE BEBE</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">

    <script language="javascript">
    step=0;
    function autoImgFlip() {
    if (step < 6) {step++;}
    else {step=0;}
    if (step==0)
    {a.src="objectos/imagenuno.jpg";}
    if (step==1)
    {a.src="objectos/imagendos.jpg";}
    setTimeout("autoImgFlip()", 3000);
    if (step==2)
    {a.src="objectos/imagentres.jpg";}
    if (step==3)
    {a.src="objectos/imagencuatro.jpg";}
    if (step==4)
    {a.src="objectos/imagencinco.jpg";}
    if (step==5)
    {a.src="objectos/imagenseis.jpg";}
    }


    </script>
    </head>
    <meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
    <body onLoad="autoImgFlip();">
    <div id="global">
    <div id="curva-superior"></div>
    <div id="cabecera">
    <div id="logotipo"><a href="index.html"><img src="objectos/logo_BAL.png" width="270px"
    height="80px" alt="Haz clic aquí para volver a la página de inicio"></a></div>
    <div id="publicidad">by NEW EUROPE BEBE</div>
    </div>
    <div id="navegacion">
    <ul>
    <li><a href="index.html">Portada</a></li><li><a href="conocenos/conocenos.html">Conócenos</a></li><li><a href="productos/productos.html">Productos</a></li><li><a href="donde estamos/donde estamos.html">Dónde estamos?</a></li><li><a href="contacto/contacto.html">Contacto</a></li>
    </ul>
    </div>
    <div id="contenido">



    <h1><div id="fotoportada"><img src="objectos/fotoproductos.jpg.jpg" width="550px" height="450px" alt="portada" /></div></h1>

    [img]objectos/imagenuno.jpg[/img]
    <p></p>


    </div>
    <div id="pie">Este es el pié de página</div>
    <div id="curva-inferior"></div>
    </div>




    </body>
    </html>


    Gracias! espero vuestra ayuda!

  11. #56
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    13 sep, 14
    Ubicación
    San José CR
    Mensajes
    1
    Poder de Reputación
    0
    Cita Iniciado por javielillo Ver Mensaje
    me pasó lo mismo que a ti lo solucione poniendo las lineas de debajo del div class="cf_wraper"> de la siguiente forma:

    <div class="cf_element" id="cf1"><img src="imagenes/jpg/avionicono.jpg" height="600" width="800" /></div>

    las lineas de las siguientes fotos de la misma forma.

    Espero que te funcione a mi me ha funcionado. Suerte
    Cita Iniciado por fluri Ver Mensaje
    Hola!

    Lo siento por retomar este post tan antiguo, pero creo que es el mas facil que hay para estem tema de transicion de imagenes.
    Mi problema es que en la web me sale el [img]objectos/imagenuno.jpg[/img] en vez de las fotos.

    Os pongo lo que tengo escrito:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>NEW EUROPE BEBE</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">

    <script language="javascript">
    step=0;
    function autoImgFlip() {
    if (step < 6) {step++;}
    else {step=0;}
    if (step==0)
    {a.src="objectos/imagenuno.jpg";}
    if (step==1)
    {a.src="objectos/imagendos.jpg";}
    setTimeout("autoImgFlip()", 3000);
    if (step==2)
    {a.src="objectos/imagentres.jpg";}
    if (step==3)
    {a.src="objectos/imagencuatro.jpg";}
    if (step==4)
    {a.src="objectos/imagencinco.jpg";}
    if (step==5)
    {a.src="objectos/imagenseis.jpg";}
    }


    </script>
    </head>
    <meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
    <body onLoad="autoImgFlip();">
    <div id="global">
    <div id="curva-superior"></div>
    <div id="cabecera">
    <div id="logotipo"><a href="index.html"><img src="objectos/logo_BAL.png" width="270px"
    height="80px" alt="Haz clic aquí para volver a la página de inicio"></a></div>
    <div id="publicidad">by NEW EUROPE BEBE</div>
    </div>
    <div id="navegacion">
    <ul>
    <li><a href="index.html">Portada</a></li><li><a href="conocenos/conocenos.html">Conócenos</a></li><li><a href="productos/productos.html">Productos</a></li><li><a href="donde estamos/donde estamos.html">Dónde estamos?</a></li><li><a href="contacto/contacto.html">Contacto</a></li>
    </ul>
    </div>
    <div id="contenido">



    <h1><div id="fotoportada"><img src="objectos/fotoproductos.jpg.jpg" width="550px" height="450px" alt="portada" /></div></h1>

    [img]objectos/imagenuno.jpg[/img]
    <p></p>


    </div>
    <div id="pie">Este es el pié de página</div>
    <div id="curva-inferior"></div>
    </div>




    </body>
    </html>


    Gracias! espero vuestra ayuda!
    Wow primer comentario después de casi dos años, me siento como un arqueólogo que descubrió este viejo foro. Lo mejor es que lo leí casi desde el principio y hasta el comentario 54 de javilillo logré resolverlo. Esta última persona fluri tuvo el mismo problema que yo, me imagino que ya habrá encontrado la respuesta sino mira bien, todo el tiempo estuvo en el comentario anterior al tuyo. :)

  12. #57
    Recien Llegado! Merodeador
    Fecha de Ingreso
    29 dic, 15
    Mensajes
    9
    Poder de Reputación
    0
    Hola, muchas gracias por todo, estoy probando esto de la rotación de las imágenes pero no me funciona, me sale un error de script dice que 'a' no esta definido, dejo el código para que por favor si pueden me ayuden gracias.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>C O M O D I T O</title>
    <link rel="stylesheet" href="estilo.css" type="text/css" media="all">
    <script language="javascript">
    step=0;
    function autoImgFlip() {
    if (step < 3) {step++;}
    else {step=0;}
    if (step==0)
    {a.src="objetos/imagen1.jpg";}
    if (step==1)
    {a.src="objetos/imagen2.jpg";}
    setTimeout("autoImgFlip()", 3000);
    if (step==2)
    {a.src="objetos/imagen3.jpg";}
    if (step==3)
    {a.src="objetos/imagen4.jpg";}

    }
    </script>
    </head>
    <body>
    <body onLoad="autoImgFlip();">
    <div id="global">
    <div id="cabecera">
    <div id="logotipo">
    <a href="#">
    [img]objetos/imagen1.jpg[/img]
    <!-- / <img src="objetos/logo.jpg" width="270" height="120px"
    alt="Haz clic aquí para volver a la página de inicio"> -->
    </a>
    </div>
    <div id="comodito">
    <P>COMODITO PARA TODOS</P>
    </div>
    </div>
    <div id="Bienvenida">
    </div>

  13. #58
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,047
    Poder de Reputación
    21
    @dianaprieto y todos los demás, hay un mensaje confuso en las instrucciones de peugeot...

    En el paso 1 hay que añadir algo más:

    Código:
    <script language="javascript"> 
      var step=0; 
      function autoImgFlip() {
        var a = document.getElementById('rotar');
    			
        if (step < 3) { step++; }
        else { step = 0; }
    				
        if (step==0)
            { a.src="objetos/img1.jpg"; } 
        if (step==1) { a.src="objetos/img2.jpg"; } 
    				
        setTimeout("autoImgFlip()", 3000); 
    				
        if (step==2) {a.src="objetos/img3.jpg";} 
        if (step==3) {a.src="objetos/img4.jpg";}
    
        /*
    
        if(step == 4) { a.src = "objetos/img5.jpg"; }
        if(step == 5) { a.src = "objetos/img6.jpg"; }
        if(step == 6) { a.src = "objetos/img7.jpg"; }
        if(step == N) { a.src = "objetos/imgN.jpg"; }
    
        // N es un número.
        */
      }
    </script>
    En el paso 4, en lugar de escribir [img]objetos/imagen.jpg[/img], deben utilizar la etiqueta img:

    Código HTML:
    <img src="objetos/img1.jpg" />

    Y por último, deben añadir un id a la etiqueta img, que será la que "rotará" las imágenes:

    Código HTML:
    <img id="rotar" src="objetos/img1.jpg" />
    El id debe corresponder con la línea del script var a = document.getElementById('rotar'); y viceversa. Si no son iguales, entonces no funcionará.

    Nota: reemplacen los nombres de las imágenes donde corresponda.

    Saludos!
    Última edición por skaparate; 24/02/2015 a las 15:10

  14. #59
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    18 jun, 16
    Mensajes
    2
    Poder de Reputación
    0
    Excelente! Muchas gracias. Voy a intentar implementarlo en mi blog https://www.itv-cita.org/turismos/ !... Saludos.
    Última edición por renovarParo; 26/01/2017 a las 22:39

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
  •