slide show

[jaso]

estoy haciendo una pagina de mi pueblo y tengo muchas fotografias,me gustaria hacer un "slide show" horizontal donde las imagenes fueran pasando en un tamaño pequeño y tuvieran un link para abrirlas en otra pagina en grande.si alguien me pudiera pasar un codigo javascript o una direccion donde tuviera algun ejemplo le estaria muy agradecido...gracias
jose

[Wakkos]

Yo hice algo que te puede servir en www.jimenezcortabitarte.com en la sección así construimos.

A ver, el script:

Código:

<SCRIPT language=JavaScript>
window.onerror = null;
window.defaultStatus ="";
function removeFocus() {
	for (i = 0; i < document.links.length; i++) {
		document.links[I].onfocus = document.links.blur;
	}
}
flag = true;
function MoveLayer(n,Xf){
if(document.images && flag == true){
flag = false;
if (document.layers){
Xs = parseInt(document.layers[n].left);
setTimeout("flag = true;",31*30);
for(I = 1; I <= 50; I++){
Xp = Xs+((Xf-Xs)*I/50); 
window.status = Xp;
setTimeout("document.layers."+n+".left = '"+Xp+"'", I*30);
}
}
else if (document.all){
Xs = parseInt(document.all[n].style.left);
setTimeout("flag = true;",31*30);
for(I = 1; I <= 60; I++){
Xp = Xs+((Xf-Xs)*I/60); 
setTimeout("document.all['"+n+"'].style.left = '"+Xp+"px'", I*15);
}
}
else if (document.getElementById &&! document.all){
Xs = parseInt(document.getElementById(n).style.left);
setTimeout("flag = true;",31*60);
for(I = 1; I <= 30; I++){
Xp = Xs+((Xf-Xs)*I/30); 

setTimeout("document.getElementById('"+n+"').style.left = '"+Xp+"px'", I*20);
}
}

flag 
}
}

// window.onload = new Function("if(document.images) myScroll();");

</SCRIPT>

  

Luego, defines tantas capas según imágenes tengas:
(no cabe, otra página -->)

[Wakkos]

Código:

<style type="text/css">
	

	DIV.fotograma1 { position:absolute; left:0px; width:476px; top:34px; border:0px solid #000; }
	DIV.fotograma2 { position:absolute; left:525px; width:450px; top:34px; border:0px solid #000;}
	DIV.fotograma3 { position:absolute; left:1025px; width:450px; top:34px; border:0px solid #000;}
	DIV.fotograma4 { position:absolute; left:1525px; width:450px; top:34px; border:0px solid #000;}
	DIV.fotograma5 { position:absolute; left:2025px; width:450px; top:34px; border:0px solid #000;}
	DIV.fotograma6 { position:absolute; left:2525px; width:450px; top:34px; border:0px solid #000;}
	DIV.fotograma7 { position:absolute; left:3025px; width:450px; top:34px; border:0px solid #000;}
	</style>

Claro, cada capa está definida según la distancia desde el punto cero ('0') horizontalmente y se va sumando según el ancho de la imagen más el margen que exista ebtre ellas.

Luego, yo tengo una imagen que llama a la función movelayer y que definme hasta que distancia se va a mover el layer, claro, si quieres que se mueva hacia la derecha, la medida de X será negativa.

Hagamos un ejemplo:
<A href="javascript:javascript:MoveLayer('mainNa v',-1000);"><IMG SRC="../images/flechas_01.gif" WIDTH="65" HEIGHT="18" border="0" alt=""></a>

eso va a mover la capa a la posición -1000 px a la izquierda y así puedes jugar con diferentes combinaciones.