Foros del Web » Programando para Internet » Javascript »

problemas con scroll imagenes

Estas en el tema de problemas con scroll imagenes en el foro de Javascript en Foros del Web. Wenas: Estoy desarrollando un scroll de imagenes formado por: el propio scroll, formado por flechitas a izq y drcha y en el centro las imagenes ...
  #1 (permalink)  
Antiguo 01/02/2004, 07:01
Avatar de fjmasero  
Fecha de Ingreso: diciembre-2002
Mensajes: 488
Antigüedad: 21 años, 11 meses
Puntos: 1
problemas con scroll imagenes

Wenas:

Estoy desarrollando un scroll de imagenes formado por:

el propio scroll, formado por flechitas a izq y drcha y en el centro las imagenes en pequeño, de 5 en 5, de tal forma q al poner el raton por encima de las flechas, la imagenes pequeñas se desplazan.

En estas imagens pequeñas, al pasar el raton por encima, se hace un rollover de esta imagen q esta por debajo del scroll, con un tamaño + grande, visualizandose la elegida.

También se visualiza por debajo de la imagen en grande el texto correspondiente a cada una de las fotos.

Para todo ello, se usan capas, y en la del scroll, se altera su posicion.

El problema es que si pongo las posiciones (position) de las capas en absolute (con sus respectivos top y left) todo funciona bien tanto en IE, como en Mozilla y NS, pero si las capas las inserto entre el diseño de una table, poniendo el position en relative, en NS y sobretodo en Mozilla, al pasar el ratón sobre las imágenes pequeñas o las flechas del scroll, se produce un ensanchamiento de la td en la q está situada la capa q las engloba.

Llevo un rato dandole vueltas, cambiando la configuración, y no soy capaz de averiguar pq.

El código os lo pongo en una respuesta posterior para q esté + claro, pq como es un poco largo, ...

(es posible q se me haya olvidado corregir alguna de las "pruebas" q he hecho)

Si queréis probarlo, solo poner imágenes en los src correspondientes.

Hay puestos bordes en las table para poder observar como se expande.

Hacerme las preguntas q queráis.

Espero vuestra ayuda. Gracias.
__________________
No es sabio el que sabe sino el que no sabe y quiere aprender

Última edición por fjmasero; 01/02/2004 a las 07:08
  #2 (permalink)  
Antiguo 01/02/2004, 07:12
Avatar de fjmasero  
Fecha de Ingreso: diciembre-2002
Mensajes: 488
Antigüedad: 21 años, 11 meses
Puntos: 1
El código:
Código:
<html>
<head>
	<title</title>
	<link rel="STYLESHEET" type="text/css" href="css/comunes.css">
</head>

<body style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<table border="10" bordercolor= "navy" cellspacing="0" cellpadding="10">
	<tr>
		<td>xxxxx xxx x xxxx xxxx</td>
		<td>
<script language="JavaScript1.2">

//configurar la ruta de las flechas
var goleftimage='img/flechaizq.gif'
var gorightimage='img/flechader.gif'
//configurara el ancho
var menuwidth=150
//configurar altura
var menuheight=25
//configurar la velocodad del scroll de 1 a 10, 1 es el mínimo
var scrollspeed=5
//contenido del scroll
var menucontents='<nobr><a href="#" onmouseover="cambiaFoto(1)" onmouseout="liberar();"><img src="img/uno.gif" width="22" height="32" alt="foto 1" title="foto 1" border="0" hspace="4"></a><a href="#" onmouseover="cambiaFoto(2)" onmouseout="liberar();"><img src="img/dos.gif" width="22" height="32" alt="foto 2" title="foto 2" border="0" hspace="4"></a><a href="#" onmouseover="cambiaFoto(3)" onmouseout="liberar();"><img src="img/tres.gif" width="22" height="32" alt="foto 3" title="foto 3" border="0" hspace="4"></a><a href="#" onmouseover="cambiaFoto(4)" onmouseout="liberar();"><img src="img/cuatro.gif" width="22" height="32" alt="foto 4" title="foto 4" border="0" hspace="4"></a><a href="#" onmouseover="cambiaFoto(5)" onmouseout="liberar();"><img src="img/cinco.gif" width="22" height="32" alt="foto 5" title="foto 5" border="0" hspace="4"></a><a href="#" onmouseover="cambiaFoto(6)" onmouseout="liberar();"><img src="img/seis.gif" width="22" height="32" alt="foto 6" title="foto 6" border="0" hspace="4"></a><a href="#" onmouseover="cambiaFoto(7)" onmouseout="liberar();"><img src="img/siete.gif" width="22" height="32" alt="foto 7" title="foto 7" border="0" hspace="4"></a></nobr>';
var fotosver= new Array('<img src="img/uno.gif" width="88" height="128" alt="foto 1" title="foto 1" border="0" hspace="4">','<img src="img/dos.gif" width="88" height="128" alt="foto 2" title="foto 2" border="0" hspace="4">','<img src="img/tres.gif" width="88" height="128" alt="foto 3" title="foto 3" border="0" hspace="4">','<img src="img/cuatro.gif" width="88" height="128" alt="foto 4" title="foto 4" border="0" hspace="4">','<img src="img/cinco.gif" width="88" height="128" alt="foto 5" title="foto 5" border="0" hspace="4">','<img src="img/seis.gif" width="88" height="128" alt="foto 6" title="foto 6" border="0" hspace="4">','<img src="img/siete.gif" width="88" height="128" alt="foto 7" title="foto 7" border="0" hspace="4">');
var tFoto = new Array('<span class=t_treb9neg>text foto 1</span>','<span class=t_treb9neg>texto foto 2</span>','<span class=t_treb9neg>texto foto 3</span>','<span class=t_treb9neg>texto foto 4</span>','<span class=t_treb9neg>texto foto 5</span>','<span class=t_treb9neg>texto foto 6</span>','<span class=t_treb9neg>texto foto 7</span>');

var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:relative;top:-100;left:-1000">'+menucontents+'</span>')
var actualwidth=''
var cross_scroll, ns_scroll
var loadedyes=0

function liberar(){
loadedyes=1
fillup();
}

function fillup(){
if (iedom){
cross_scroll=document.getElementById? document.getElementById("test2") : document.all.test2
cross_scroll.innerHTML=menucontents
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2
ns_scroll.document.write(menucontents)
ns_scroll.document.close()
actualwidth=ns_scroll.document.width
}
loadedyes=1
}
window.onload=fillup

function moveleft(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed
//alert(cross_scroll.style.left)
}
else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))
ns_scroll.left-=scrollspeed
}
lefttime=setTimeout("moveleft()",50)
}

function moveright(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)<0)
cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed
else if (document.layers&&ns_scroll.left<0)
ns_scroll.left+=scrollspeed
}
righttime=setTimeout("moveright()",50)
}

if (iedom||document.layers){
with (document){
if (iedom){//alert();
write('<table cellpadding="10" cellspacing="0" border="1" bordercolor="lime">');
write('	<tr>');
write('		<td>');
write('			<table cellpadding="0" cellspacing="0" border="1" bordercolor="red"');
write('				<tr>');
write('					<td>');

write('<div style="position:relative;top:0;left:0;">')//write('<div style="position:relative;width:'+menuwidth+';top:0;left:0">')
write('<a href=#" onMouseover="moveright()" onMouseout="clearTimeout(righttime)"><img src="'+goleftimage+'"border=0 alt="Flecha Izquierda" title="Flecha Izquierda"></a>')
write('</div>')

write('					</td>');
write('					<td>');

//write('<div style="position:relative;top:0;left:0;">')//write('<div style="position:relative;width:'+menuwidth+';top:0;left:0;">')
write('<div style="position:relative;width:'+menuwidth+';height:'+menuheight+';overflow:hidden;">')
write('<div id="test2" style="position:relative;left:0;top:0;">')
write('</div></div>')//write('</div></div></div>')

write('					</td>');
write('					<td>');

write('<div style="position:relative;top:0;left:0;">')//write('<div style="position:relative;width:'+menuwidth+';top:0;left:0">')
write('<a href="#" onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"><img src="'+gorightimage+'"border=0 alt="Flecha Derecha" title="Flecha Derecha"></a>')
write('</div>')

write('					</td>');
write('				</tr>');
write('			</table>');
write('		</td>');
write('	</tr>');
write('	<tr>');
write('		<td>');

write('<div id="fotos" style="position:relative;top:0;left:0;width:88px;height:100px;">')
write('<img src="img/uno.gif" width="88" height="128" alt="" title="foto" border="0" hspace="4">')
write('</div>')

write('		</td>');
write('	</tr>');
write('	<tr>');
write('		<td>');

write('<div style="position:relative;top:0;left:0;">')
write('<div id="textoFoto" style="position:relative;left:0;top:0;">')
write('<span class="t_treb9neg" >texto foto 1</span>')
write('</div></div>')

write('		</td>');
write('	</tr>');
write('</table>');
}

}
}

function cambiaFoto(cual){
cual = cual - 1
if (iedom){
cross_scroll=document.getElementById? document.getElementById("fotos") : document.all.fotos
cross_scroll.innerHTML=fotosver[cual]
cross_scroll=document.getElementById? document.getElementById("textoFoto") : document.all.textoFoto
cross_scroll.innerHTML=tFoto[cual]
//textoFoto tFoto
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth

}
else if (document.layers){
ns_scroll=document.fotos.document.fotos1
ns_scroll.document.write(fotosver[cual])
ns_scroll.document.close()
ns_scroll2=document.textoFoto.document.textoFoto1
ns_scroll2.document.write(fotosver[cual])
ns_scroll2.document.close()
actualwidth=ns_scroll.document.width
}
}
</script>
		</td>
	</tr>
</table>
</body>
</html>
__________________
No es sabio el que sabe sino el que no sabe y quiere aprender
  #3 (permalink)  
Antiguo 15/02/2005, 04:44
Avatar de arcanis  
Fecha de Ingreso: diciembre-2004
Mensajes: 11
Antigüedad: 19 años, 11 meses
Puntos: 0
haber peña que no se muera este post que parece muy interesante hecharle una manita.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:21.