Regresar a la página www.ComoCrearTuWeb.com
Página 2 de 4 PrimerPrimer 1234 ÚltimoÚltimo
Resultados 16 al 30 de 59

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

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

    qué bueno que te hayas animado a poner el script y disculpa por la demora en la respuesta.

    He visto tus códigos y veo que en el punto 4 está el error: tienes que poner una sola línea de código y no 4 como has puesto. Solo tienes que poner el nombre de la imagen que quieres que sea la primera en aparecer y eso es todo:

    [img]objetos/imagenuno.jpg[/img] En tu caso, sería:

    [img]images/imagen2.PNG[/img]

    Por favor, avísame cómo te salió, estaré al tanto. Ah!!! y pronto haré el nuevo script de rotación. un saludo.
    ATRÉVETE A VIVIR SIN VIOLENCIA

  2. #17
    Me va gustando esto... Habitante
    Fecha de Ingreso
    19 oct, 08
    Ubicación
    Córdoba, Argentina.
    Mensajes
    131
    Poder de Reputación
    14
    Hola de nuevo, lo probe como tu dices pero sigue igual nada mas q ahora solo muestra 1 imagen pero no rotan.
    Las imagenes estaban con diferentes alturas y anchuras, yo las pixele a todas con el paint en 561 y 188, ya que lei que deben ser si o si del mismo width y height.

    Te dejo de vuelta el codigo html por si le ves algo raro:


    <!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()", 2500);
    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]


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



    jeje escribiendo esto me he dado cuenta de algo, que solo lo estaba probando en mozilla firefox y ahi no anda recien me fije en internet exlorer y si me anda :D

    Diganme que pasa con mozilla que no rota las imagenes :S

    Desde ya muchas gracias :D

  3. #18
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    21 ago, 08
    Mensajes
    430
    Poder de Reputación
    16
    me alegro que ya te haya salido!!! Ahora, respecto a lo de firefox, aquí te pego la respuesta que le di a eduardmarx y que está en la página anterior.


    Cita Iniciado por peugeot
    Hola amigo,


    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.

    A lo mejor, tienes el mismo problema. Sería bueno investigar más este tema, aunque yo, ya no me hago rollos con los navegadores. Nos leemos y saludos.
    ATRÉVETE A VIVIR SIN VIOLENCIA

  4. #19
    Me va gustando esto... Habitante
    Fecha de Ingreso
    19 oct, 08
    Ubicación
    Córdoba, Argentina.
    Mensajes
    131
    Poder de Reputación
    14
    termine de ver todo y sigue igual :S
    Me fije q este activado JavaScript y lo esta en mozilla y tambien me fije eso del noscript y lo descargue y reinicie firefox y tampoco se pudo ver...

    Vos lo ves en mozilla?

  5. #20
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    21 ago, 08
    Mensajes
    430
    Poder de Reputación
    16
    en mozilla se ve todo ok., en firefox por lo menos en la versión 3.5.5 en windows sí se ve. Lamento decir que no domino este tema por lo que seré de poca ayuda. Ojalá, alguien pueda dar más pistas.

    Estaré al tanto, saludos.
    ATRÉVETE A VIVIR SIN VIOLENCIA

  6. #21
    Me va gustando esto... Habitante
    Fecha de Ingreso
    19 oct, 08
    Ubicación
    Córdoba, Argentina.
    Mensajes
    131
    Poder de Reputación
    14
    yo tambien tengo la misma version de firefox:

    Firefox/3.5.5 GTB6

    Averiguare mas sobre el tema si alguien llegara a saber la respuesta publiquela mientras tanto estare averiguando

    Gracias igual sirve mucho para internet explorer ya que la gran mayoria el 80 % aca en argentina seguro utiliza Internet Explorer. Asi que mientras que ande en la gran mayoria estara bien :D

  7. #22
    Recien Llegado! Merodeador
    Fecha de Ingreso
    29 mar, 09
    Mensajes
    6
    Poder de Reputación
    0
    Hola aqui os dejo una pagina de javascripts que me parecio muy interesante

    http://lawebdedany.atwebpages.com/

  8. #23
    Me va gustando esto... Habitante
    Fecha de Ingreso
    19 oct, 08
    Ubicación
    Córdoba, Argentina.
    Mensajes
    131
    Poder de Reputación
    14
    bueno como no pude solucionarlo lo mejor es hacer un gif con las imagenes que quiseramos poner.
    Gracias igualmente

  9. #24
    Recien Llegado! Habitante
    Fecha de Ingreso
    08 feb, 10
    Mensajes
    21
    Poder de Reputación
    12
    Hola, bueno, ante todo, puesto que es el primer post que escribo, pues dar las gracias a todos los que haceis posible que la gente que no tenia ni la minima idea del tema, como es mi caso, pueda poco a poco ir aprendiendo de forma tan amena con los cursos de Como Crear Tu Web. Hasta ahroa, esta todo tan sumamente claro que no habia necesitado ni preguntar nada, lo cual dice mucho de la calidad de los cursos y del foro. Queria poner una rotacion de imagenes en mi pagina y no sabia como, incluso estaba mirando si era posible colocar un power point en ella, cuando vi este post se me abrieron los ojos, lo probé y funcionaba perfectamente, pero posteriormente cuando lo puse en mi pagina no me funciona, sale la primera imagen, pero se queda fija y no rota con las demas, he probado todo lo que pone en los disitintos post, en distintos navegadores y eso, pero nada, supongo que tiene que ser una tonteria el motivo por el que no va, pero no doy con el. Os pongo todo el codigo que tengo hecho a ver si sabeis decirme el porque me ocurre.

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

    <html>
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

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

    }
    </script>

    </head>
    <body>
    <div id="global">
    <body onLoad="autoImgFlip();">
    <div id="curva-superior"></div>
    <div id="cabecera">
    <div id="molino">[img]imagenes/molino.gif[/img]</a></div>
    </div>
    <div id="navegacion">
    <ul>[*]INICIO[*]SOMOS[*]ESTAMOS[*]PREMIOS[*]NOTICIAS[*]CONTACTO[/list]
    </div>
    <div id="contenido">
    <div id="comprar">
    <ul><h1>JUGAR</h1>[*][img]imagenes/loteria-nacional.jpg[/img][*][img]imagenes/euromillones.jpg[/img][*][img]imagenes/gordo.jpg[/img][*][img]imagenes/primitiva.jpg[/img][*][img]imagenes/bonoloto.jpg[/img][*][img]imagenes/quiniela.jpg[/img][*][img]imagenes/quinigol.jpg[/img]
    [/list]
    </div>
    <div id="resultados">
    <ul><h1>COMPROBAR</h1>[*][img]imagenes/loteria-nacional.jpg[/img][*][img]imagenes/euromillones.jpg[/img][*][img]imagenes/gordo.jpg[/img][*][img]imagenes/primitiva.jpg[/img][*][img]imagenes/bonoloto.jpg[/img][*][img]imagenes/quiniela.jpg[/img][*][img]imagenes/quinigol.jpg[/img]
    [/list]
    </div>
    <div id="imagen">[img]imagenes/quijote-color.gif[/img]</div>
    [img]imagenes/imagenuno.gif[/img]
    <div id="pie">
    <div id="participaciones">[img]imagenes/participaciones.gif[/img]</div>
    <div id="botes">[img]imagenes/botes.png[/img]</div>
    <div id="peñas">
    <a href="#"><script language="JavaScript1.1">
    var specifyimage=new Array() //Your images
    specifyimage[0]="imagenes/mini05.jpg"
    specifyimage[1]="imagenes/mini06.png"
    specifyimage[2]="imagenes/mini07.jpg"

    var delay=3000 //3 seconds

    //Counter for array
    var count =1;

    var cubeimage=new Array()
    for (i=0;i<specifyimage.length;i++){
    cubeimage[i]=new Image()
    cubeimage[i].src=specifyimage[i]
    }

    function movecube(){
    if (window.createPopup)
    cube.filters[0].apply()
    document.images.cube.src=cubeimage[count].src;
    if (window.createPopup)
    cube.filters[0].play()
    count++;
    if (count==cubeimage.length)
    count=0;
    setTimeout("movecube()",delay)
    }

    window.onload=new Function("setTimeout('movecube()',delay)")
    </script>

    [img]objetos/mini04.jpg[/img]
    </a></div>
    <div id="contacto">[img]imagenes/CONTACTA.gif[/img]</div>
    <div id="facebook">[img]imagenes/facebook.gif[/img]<a/></div>
    <div id="tiempo">
    <iframe src="http://a.forecabox.com/get/17771" width="150" height="120" marginwidth="0"
    marginheight="0" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
    </div>
    </div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>

    Otra cosa que me pasa es que en Dreamweaver me salen en amarillo estas dos lineas:
    <div id="global">
    <body onLoad="autoImgFlip();">

    como que es un codigo no valido y tampoco se muy bien porque es y si tendrá algo que ver en que no me funcione.
    GRACIAS.

  10. #25
    Moderador CCTW Habitante
    Fecha de Ingreso
    12 ago, 07
    Ubicación
    Galicia (España)
    Mensajes
    3,421
    Poder de Reputación
    33
    Interesante, tomo nota, siempre me puede hacer falta :)

    P.D: Casi lo veo a poner como tema fijo en esta sección.

  11. #26
    Recien Llegado! Habitante
    Fecha de Ingreso
    08 feb, 10
    Mensajes
    21
    Poder de Reputación
    12
    Bueno, he conseguido que funcione el script de la rotacion de imagenes, pero como habeis podido ver tenia tambiene este: http://lawebdedany.atwebpages.com/ja...-imagenes.html, y no hay manera de que funcionen los dos a la vez, o funciona uno o el otro, entonces queria saber si existe alguna incompatibilidad entres ambos y no es posible que funcionen a la vez o es que estoy haciendo algo mal, que será lo mas probable, GRACIAS.

  12. #27
    Me va gustando esto... Habitante Avatar de arigrodriguez1201
    Fecha de Ingreso
    09 feb, 09
    Ubicación
    Soria
    Mensajes
    116
    Poder de Reputación
    13

    Consulta sobre este script

    Hola peugeot, ya hice tal cual lo dijiste el script y funciona, pero en mi script se va una imagen y aparece la otra pero no esfumado como vos lo tenes en

    http://www.celuladeoracion.com

    Por favor respondeme porque me esta volviendo loco.
    Dispuesto a aprender; dispuesto a compartir

    htttp://www.eldesbarajuste.es

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

    disculpa la tardanza en la respuesta pero, no entro todos los días al foro como quisiera, aunque tampoco me desligo de cctw por completo.

    Creo que no me he expresado bien en el post. En realidad, hay dos scripts: el primero es el que explico paso a paso aquí y que en ese entonces, estaba en la web. El segundo script es el que figura actualmente en la web y cuya explicación no la he hecho hasta ahora por falta de tiempo.

    Sin embargo, prometo ordenarme un poco con el tiempo y hacerlo sin falta, a más tardar, en la primera quincena de mayo. ¿Qué día? No lo sé exactamente pero, A MÁS TARDAR, el 15 de mayo y, créeme, yo cumplo con mi palabra (I hope so, dijo el gringo ).

    El segundo script es mucho mejor por el detalle del esfumado y, créeme, es muy sencillo de hacer. Además, se ve en todos los navegadores sin ningún problema. Solo te pido un poquito de paciencia.

    Mil gracias, nos leemos!!!
    ATRÉVETE A VIVIR SIN VIOLENCIA

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

    Aquí, lo ofrecido: la explicación PASO A PASO del script de rotación de imágenes con el difuminado (o esfumado). Se ve indefectiblemente en todos los navegadores. Realmente, es muy sencillo y consta de solo 5 pasos. Supongamos que trabajamos con 4 imágenes con un alto de 250px y un ancho de 450 px tal como en la web que nos sirve de ejemplo.

    1. Dentro del head en la hoja html (antes de la etiqueta de cierre) copian y pegan:

    <script type="text/javascript" src="crossfader.js"></script>
    <style type="text/css">
    #wrapper {float:right ;width:450px; height:250px}
    </style>


    2. Ahora, en el body, creamos un div para las imágenes al que llamaremos WRAPPER y copian y pegan lo siguiente:


    <div id="wrapper">
    <div class="cf_wrapper">
    <div class="cf_element" id="cf1">[img]imagenes/1.jpg[/img]</div>
    <div class="cf_element" id="cf2">[img]imagenes/2.jpg[/img]</div>
    <div class="cf_element" id="cf3">[img]imagenes/3.jpg[/img]</div>
    <div class="cf_element" id="cf4">[img]imagenes/4.jpg[/img]</div>
    </div>
    </div>

    Ojo donde dice “imagenes/1.jpg” porque imagenes es el nombre de MI carpeta. Aquí, ustedes le ponen el nombre de SU carpeta, ejemplo: “objetos/1.jpg”. Tampoco olviden modificar los px del widht y height según el tamaño de sus imágenes.
    Este es un ejemplo solo para 4 imágenes. Por cada imagen adicional que quieran poner, añadirán una línea más de código <div class=… cf5”, cf6, etc.

    3. En la hoja de estilo, le damos las propiedades al div; copien y peguen:

    #wrapper {text-align:left; height:250px; width:450px;}

    Por favor, no me pregunten por qué he puesto left si las imágenes están a la derecha.

    4. Copien y peguen los siguientes códigos justo antes de la etiqueta de cierre del body:

    <script type="text/javascript">
    var cf = new Crossfader( new Array('cf1','cf2','cf3', 'cf4'), 2000, 2000 );
    </script>

    Si quieren poner más imágenes, añaden ‘cf5’, ‘cf6’ y así sucesivamente. La primera cifra 2000 corresponde exactamente al difuminado (más lento, 4000 o rápido, 500); 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.

    5. Finalmente, no se asusten con el siguiente código que solo tienen que copiarlo y pegarlo en el bloc de notas y nombrar el archivo como:

    crossfader.js

    Luego, suben el archivo a la raiz de la carpeta local e internet y eso es todo. Hemos terminado. Aquí, lo que tienen que copiar y pegar:


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

    De verdad, espero que les gusta, que les sirva y que les salga. Y posteen qué tal les parece. Cualquier inconveniente, trataremos de solucionarlo. Saludos a toda la gente de cctw.
    ATRÉVETE A VIVIR SIN VIOLENCIA

  15. #30
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    17 ene, 09
    Ubicación
    argentina
    Mensajes
    472
    Poder de Reputación
    15
    muy bueno este script, segui posteando con esa calidad...!!!!

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
  •