Barrido de imagenes al hacer clic, ¿como se logra?

Kati · #1 (**permalink**) 22/06/2004, 21:10

Hola a las y los omnipotentes, aqui una humilde terricola con un gran enredo...

En esta pagina, que esta en html, al hacer clic a a las flechas de navegación una imagen reemplaza a la otra con un efecto de barrido... http://www.pjoseph.com/new_work.php?...w_column=1:3:1

Y en esta otra hay algo similar, pero el barrido ocurre cuando se hace clic sobre la imagen misma... http://explosion.nu/index_main.html (clic sobre portfolio/midori)

Me gustaria utilizar este efecto (al hacer clic en siguiente) para el web que estoy diseñando.

Quien se apiade que escriba como para kinder, porfa!

Gracias a tod@s por anticipado,

Kati

caricatos · #2 (**permalink**) 23/06/2004, 00:58

Hola Kati:

Dime si te sirve algo de lo que hay en esta página: http://www.pepemolina.com/imagenes/ y si es así te puedo ayudar a usarlo.

Saludos

Kati · #3 (**permalink**) 23/06/2004, 21:25

La transicion que me intresa es la de 'Cerrar desde la izquierda' del proyector de diapositivas; pero dime, ¿sera posible que esta se realice al hacer clic sobre un texto, digamos "siguiente" o "anterior" mas que de un boton? y ¿se puede aumentar la velocidad de la transicion o es algo fijo?.

Muchisimas gracias,

caricatos · #4 (**permalink**) 24/06/2004, 07:14

Hola otra vez:

Kati: Las dos preguntas tienen una respuesta afirmativa...

... espero que tengas paciencia porque yo estoy algo escaso de tiempo, pero en breve te pongo un ejemplo.

Saludos

Kati · #5 (**permalink**) 22/07/2004, 21:29

Cita:

Iniciado por caricatos

Hola otra vez:

Kati: Las dos preguntas tienen una respuesta afirmativa...

... espero que tengas paciencia porque yo estoy algo escaso de tiempo, pero en breve te pongo un ejemplo.

Saludos

Hola Caricatos, epero que te hagas u tiempito para ayudarme con este rollo de las imagenes que cambian.

Mil gracias,

Kati

caricatos · #6 (**permalink**) 23/07/2004, 07:24

Cita:

Iniciado por Kati

Hola Caricatos, epero que te hagas u tiempito para ayudarme con este rollo de las imagenes que cambian.

Mil gracias,

Kati

La verdad es que el tiempo lo tengo un poco escaso, pero me acuerdo del tema...

Quería preparar algo fácil de adaptar, pero me trabé un poco...

Este fin de semana, me pondré...

Saludos

caricatos · #7 (**permalink**) 24/07/2004, 03:18

Hola otra vez:

Te preparé un ejemplo que se puede adaptar fácilmente:

Código:

<html>
	<head>
		<title>
			Transición
		</title>
		<script type="text/javascript">
			var x, imagen1, imagen2;
			var retardo = 5;
			var paso = 10;

			function sigueTransitando()	{
				x = x - paso;
				imagen2.style.left = x + "px";
				if (x > 0) setTimeout("sigueTransitando()", retardo);
				else	{
					imagenTemporal = imagen1.src;
					imagen1.src = imagen2.src;
					imagen2.style.left = parseInt(imagen1.width) + "px";
					imagen2.src = imagenTemporal;
				}
			}

			function iniciarTransito(img1, img2)	{
				imagen1 = document.images[img1];
				imagen2 = document.images[img2];
				ancho = parseInt(imagen1.offsetWidth);
				imagen2.style.left = ancho + "px";
				x = ancho - (ancho % paso) + paso;// alert(x);
				setTimeout("sigueTransitando()", retardo);
			}
		</script>
	</head>
	<body >
		<div style="display: block; width: 133; height: 100; overflow: hidden;" >
			<div style="position: relative; top: 0px; left: 0px;" >
				<img	name="img1"
					style="position: absolute; top: 0; left: 0;"
					src="../imagenes/fotos/mini/Diapositiva82.jpg"
				/>
				<img	name="img2"
					style="position: absolute; top: 0; left: 133px;"
					src="../imagenes/fotos/mini/Diapositiva52.jpg"
				/>
			</div>
		</div>
		<div style="position: relative;">
			<button onclick="iniciarTransito('img1', 'img2'); ">
				siguiente
			</button>
		</div>	

	</body>
</html>

Pero comprobé que es cerrar desde la derecha y no desde la izquierda...
Intenta arreglarlo para que comprendas el código.

Si tienes dificultades, no dudes en consultar.

Salidos