Regresar a la página www.ComoCrearTuWeb.com
Página 3 de 4 PrimerPrimer 1234 ÚltimoÚltimo
Resultados 31 al 45 de 59

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

  1. #31
    Esto empieza a ser un vicio... Habitante Avatar de gjulian
    Fecha de Ingreso
    29 ene, 09
    Ubicación
    Sevilla
    Mensajes
    558
    Poder de Reputación
    15
    Muy bueno, enhorabuena, es casi lo que llevo buscando... ni me acuerdo.
    Aunque para decir verdad, no es exactamente esto.
    Me explico, yo tengo en mi proyecto puesta una imagen de fondo que se ajusta a cuaquier resolucion de pantalla asi:
    HTML
    Código:
    <div>
    [img]img/fondo3.jpg[/img]
    </div>
    CSSS
    Código:
    html, body {
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
    overflow:hidden;
    }
    
    #fondo {
    position:absolute; 
    z-index:1; 
    width:100%; 
    height:100%;
    }
    Y creí que con tu script podría hacer un pase de imagenes de fondo, pero no sé o no doy con la tecla. Lo he intentado y no hay manera. ¿podríais echarle un vistazo a ver si se puede adaptar tu script al <div>
    [img]img/fondo3.jpg[/img]
    </div>
    ?
    Gracias
    Lo mejor de caerse al tropezar, es volverse a levantar.

  2. #32
    Esto empieza a ser un vicio... Habitante Avatar de gjulian
    Fecha de Ingreso
    29 ene, 09
    Ubicación
    Sevilla
    Mensajes
    558
    Poder de Reputación
    15
    CONSEGUIDO
    Tras muchos intentos lo he conseguio usando el script que dejaste y retocando un poco, he conseguido rotar la imagen de fondo y que se vea completa dicha imagen en cualquier resolucion independientemente del contenido.
    HTML
    Código:
    <script type="text/javascript" src="crossfader.js"></script>
    </head>
    <body>
    
    <div>
    [img]img/3.png[/img]
    [img]img/1.png[/img]
    [img]img/3.png[/img]
    [img]img/2.png[/img]
    </div>
    <div id="contenedor">
    <div id="contenido">
    bla,bla,bla
    </div>
    </div>
    <script type="text/javascript">
    var cf = new Crossfader( new Array('cf1','cf2','cf3','cf4'), 2000, 7000 );
    </script>
    </body>
    </html>
    CSS
    Código:
    *{text-indent:0px; margin:0px; padding:0px; border:0px;}
    
    html, body {
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
    overflow:hidden;
    }
    
    body {
    background-color:#FFFF99 ;
    font-family:Andalus, Arial, Helvetica, sans-serif; 
    font-size:1.1em;
    }
    
    #cf1,#cf2,#cf3,#cf4 {
    position:absolute; 
    z-index:1; 
    width:100%; 
    height:100%;
    }
    
    #fondo{
    position:absolute; 
    z-index:1; 
    width:100%; 
    height:100%;
    }
    
    #contenedor {
    position:absolute;
    width:100%; 
    height:100%; 
    top:0; left:0; 
    overflow:auto; 
    z-index:2;
    } 
    
    #contenido {
    padding:25px 300px 20px 14%;
    }
    Y como es de buen nacido ser agradecido expongo esto para aquel que le pueda servir como a mi.
    Gracias
    Lo mejor de caerse al tropezar, es volverse a levantar.

  3. #33
    Me va gustando esto... Habitante
    Fecha de Ingreso
    25 ene, 09
    Mensajes
    66
    Poder de Reputación
    13

    No me funciona

    Ups. Un pequeño problema al enviar el mensaje. Vean el siguiente que si es el verdadero. Diculpa

  4. #34
    Me va gustando esto... Habitante
    Fecha de Ingreso
    25 ene, 09
    Mensajes
    66
    Poder de Reputación
    13

    No me funciona

    Hola amigos.
    He querido hacer este Script también pero no me funciona. Aquí les dejo los diferentes códigos para que me ayuden a ver si tengo alguna falla.

    HTML
    Código:
    <!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=iso-8859-1" />
    <link rel="stylesheet" href="script.css" type="text/css" media="all">
    <title>Documento sin t&iacute;tulo</title>
    <script type="text/javascript" src="crossfader.js"></script> 
    <style type="text/css"> 
    #wrapper {float:right ;width:450px; height:250px} 
    </style>
    </head>
    
    <body>
    <div id="wrapper"> 
    <div class="cf_wrapper"> 
    <div class="cf_element" id="cf1">[img]Pirata/imagenuno.jpg[/img]</div> 
    <div class="cf_element" id="cf2">[img]Pirata/imagendos.jpg[/img]</div> 
    <div class="cf_element" id="cf3">[img]Pirata/imagentres.jpg[/img]</div> 
    <div class="cf_element" id="cf4">[img]Pirata/imagencuatro.jpg[/img]</div> 
    </div> 
    
    <script type="text/javascript"> 
    var cf = new Crossfader( new Array('cf1','cf2','cf3', 'cf4'), 2000, 2000 ); 
    </script> 
    </body>
    </html>
    CSS
    Código:
    #wrapper {text-align:left; height:250px; width:450px;}
    crossfader.js

    Código:
    /** 
     *  author:      Timothy Groves - http://www.brandspankingnew.net 
     *   version:   1.0 - 2006-09-25 
     * 
     *   requires:   nothing 
     * 
     */ 
    
    var useBSNns; 
    
    if (useBSNns) 
    { 
       if (typeof(bsn) == "undefined") 
          bsn = {} 
       var _bsn = bsn; 
    } 
    else 
    { 
       var _bsn = this; 
    } 
    
    
    
    _bsn.Crossfader = function (divs, fadetime, delay ) 
    {    
       this.nAct = -1; 
       this.aDivs = divs; 
        
       for (var i=0;i<divs.length;i++) 
       { 
          document.getElementById(divs[i]).style.opacity = 0; 
          document.getElementById(divs[i]).style.position = "absolute"; 
          document.getElementById(divs[i]).style.filter = "alpha(opacity=0)"; 
          document.getElementById(divs[i]).style.visibility = "hidden"; 
       } 
        
       this.nDur = fadetime; 
       this.nDelay = delay; 
           
       this._newfade(); 
    } 
    
    
    _bsn.Crossfader.prototype._newfade = function() 
    { 
       if (this.nID1) 
          clearInterval(this.nID1); 
        
       this.nOldAct = this.nAct; 
       this.nAct++; 
       if (!this.aDivs[this.nAct])   this.nAct = 0; 
       document.getElementById( this.aDivs[this.nAct] ).style.visibility = "visible"; 
        
       this.nInt = 50; 
       this.nTime = 0; 
        
       var p=this; 
       this.nID2 = setInterval(function() { p._fade() }, this.nInt); 
    } 
    
    
    _bsn.Crossfader.prototype._fade = function() 
    { 
       this.nTime += this.nInt; 
        
       var op = this._easeInOut(this.nTime, 0, 1, this.nDur); 
       var ieop = op*100; 
       document.getElementById( this.aDivs[this.nAct] ).style.opacity = op; 
       document.getElementById( this.aDivs[this.nAct] ).style.filter = "alpha(opacity="+ieop+")"; 
        
       if (this.nOldAct > -1) 
       { 
          document.getElementById( this.aDivs[this.nOldAct] ).style.opacity = 1 - op; 
          document.getElementById( this.aDivs[this.nOldAct] ).style.filter = "alpha(opacity="+(100 - ieop)+")"; 
       } 
        
       if (this.nTime == this.nDur) 
       { 
          clearInterval( this.nID2 ); 
           
          if (this.nOldAct > -1) 
             document.getElementById( this.aDivs[this.nOldAct] ).style.visibility = "hidden";    
           
          var p=this; 
          this.nID1 = setInterval(function() { p._newfade() }, this.nDelay); 
       } 
    } 
    
    
    
    _bsn.Crossfader.prototype._easeInOut = function(t,b,c,d) 
    { 
       return c/2 * (1 - Math.cos(Math.PI*t/d)) + b; 
    }
    Espero que puedan ayudarme y disculpen mi ignorancia, soy novato.[/code]
    VNDO UN TCLADO QU L FALTA UNA VOCAL

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

    gjulian, cuánto me alegro de que te haya salido, no te respondí porque recién entro al foro después de mucho tiempo.

    waldragon, gracias por tu post, aunque no es para tanto.

    david, en el punto 2, te falta una etiqueta de cierre de uno de los div:
    </div>

    ojalá eso sea todo, ya nos contarás.

    saludos a todos.
    ATRÉVETE A VIVIR SIN VIOLENCIA

  6. #36
    Me va gustando esto... Habitante
    Fecha de Ingreso
    25 ene, 09
    Mensajes
    66
    Poder de Reputación
    13

    Ya lo coloque y nada

    peugeot, ya coloque lo que medijistes en donde va pero aun sigue sin correr el Script. ¿Habrá otro problema?
    VNDO UN TCLADO QU L FALTA UNA VOCAL

  7. #37
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    21 ago, 08
    Mensajes
    430
    Poder de Reputación
    16
    david, por qué no nos das tu url para ver mejor? apaarentemente, todo está bien. ahora, cuando no aparecen las imágenes, por lo general, se trata de un problema de rutas. Verifica las rutas de tus imágenes, sobretodo si tu carpeta empieza con mayúscula, así también deberá estar en tu wordspace.

    Otra cosa, subiste el archivo de texto a la carpeta local e internet?
    ATRÉVETE A VIVIR SIN VIOLENCIA

  8. #38
    Me va gustando esto... Habitante
    Fecha de Ingreso
    25 ene, 09
    Mensajes
    66
    Poder de Reputación
    13

    No la tengo en internet

    Hola peugeot, no te doy la url de mi web porque no la tengo montada en internet. Estoy trabajando con ella desde el sitio local.
    Si salen las imagenes pero una montadas arriba de la otra a la derecha del navegador sin ejecutarse la rotación.

    Nose que pasará, pero dejame ver si te mando un pantallazo de como se ve la web desde un navehador normal.
    VNDO UN TCLADO QU L FALTA UNA VOCAL

  9. #39
    Recien Llegado! Merodeador
    Fecha de Ingreso
    06 sep, 10
    Mensajes
    3
    Poder de Reputación
    0

    Doble script

    Es script me ha salido perfectamente, gracias. Querría saber si se puede poner dos veces para dos apartados de la página, porque no lo consigo. :?

  10. #40
    Esto empieza a ser un vicio... Habitante Avatar de spitfire2
    Fecha de Ingreso
    04 sep, 10
    Ubicación
    ARGENTINA...!!!
    Mensajes
    750
    Poder de Reputación
    14
    muy bueno logre hacerlo con 7 imagenes, se ponemedia pesada pero me gusta como queda; muchas gracias.

  11. #41
    Recien Llegado! Merodeador
    Fecha de Ingreso
    06 sep, 10
    Mensajes
    3
    Poder de Reputación
    0
    Ya conseguí poner los dos script. Saludos

  12. #42
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    20 sep, 10
    Mensajes
    1
    Poder de Reputación
    0

    no me funciona

    hola mui bueno el post pero lo pongo i no me funciona aber si tu me puedes ajudar donde lo e echo mal gracias.

    te pongo el codigo para que lo veas

    <html>

    <head>

    <script language="javascript">
    step=0;
    function autoImgFlip() {
    if (step < 3) {step++;}
    else {step=0;}
    if (step==0)
    {a.src="imagenes/imagencero.jpg";}
    if (step==1)
    {a.src="imagenes/imagenuno.jpg";}
    setTimeout("autoImgFlip()", 3000);
    if (step==2)
    {a.src="imagenes/imagendos.jpg";}
    if (step==3)
    {a.src="imagenes/imagentres.jpg";}

    }
    </script>

    </head>

    <body onLoad="autoImgFlip();">

    <title>canaletas</title>



    <body bgcolor="#4F4F4F">



    <font size="100" face="algerian" color="#C0FF3E">
    <center>galeria de fotos</center>
    </font>






    </p>



    <table border="1" align="center" cellspacing="1" cellpadding="3" width="100%" height="90%">


    <tr>

    <td width=17% align="center" valign="center" body bgcolor="#C0FF3E"><font face="algerian" </font >
    menu
    </td>

    <td colspan="2" rowspan="3" width="650" height="450" height=13% align="center" valign="center" body bgcolor="#C0FF3E">

    [img]imagenes/imagencero.jpg[/img]

    </td>

    <td body bgcolor="#C0FF3E" align="center" valign="center">

    </td>

    </tr>



    <tr>
    <td rowspan="2" align="center" valign="center" body bgcolor="#C0FF3E"><font face="algerian" </font>
    inicio
    historia del canaletas
    nuestra carta
    galeria de fotos
    foro
    contacto
    </td>





    <td rowspan="2" width=17% align="center" valign="center" body bgcolor="#C0FF3E"><font face="algerian" </font>

    canaletas
    bar cafeteria
    pl.del angel nº 2
    08140
    caldes de montbui
    (barcelona)
    </td>

    </tr>



    <tr>





    </tr>
    </table>


    </body>

    </html>

  13. #43
    Recien Llegado! Habitante
    Fecha de Ingreso
    16 sep, 10
    Mensajes
    16
    Poder de Reputación
    11
    buen post, me salio de lujo un buen escript... hay algo que quisiera tener y es que alado de esa imagenes grande que se pasan, tener las imagenes mas pequeñas una abajo de la otra, no c si me explico asi como esta en la pagina principal de latam.msn.com alguien me ayuda...

  14. #44
    Recien Llegado! Merodeador
    Fecha de Ingreso
    19 jun, 10
    Ubicación
    Buenos Aires, Argentina
    Mensajes
    7
    Poder de Reputación
    0

    Gracias!

    Me encantó el script y tu descripción fue excelente! Copié los códigos que indicaste y funcionó inmediatamente.

    La pregunta que quiero hacerte es: ¿cómo lograr que la transición entre una imagen y otra sea lenta, como está en el sitio http://www.celuladeoracion.com/? Porque mis imágenes pasan como violentamente de una a otra.

    Te agradezco desde ya por tu aporte!!!

    Saludos, Vero Espindola
    Vero Espindola
    LQN ;)

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

    no sé si ya solucionaste el problema pero, en el punto 4, explico el detalle del tiempo de exposición de las imágenes. De todos modos, aquí, lo cito:

    Cita Iniciado por peugeot
    y la segunda cifra 2000 corresponde al tiempo que permanecerá en exposición la imagen antes de pasar a la siguiente. Prueben cambiando las cantidades a su gusto.
    Por si acaso, yo en mi web, tengo las 2 cantidades en 2000. Un saludo.
    ATRÉVETE A VIVIR SIN VIOLENCIA

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
  •