script ocultar/mostrar

gustax · #1 (**permalink**) 23/07/2009, 10:02

Hola gente, estoy utilizando un script que encontre googleando que la funcion que cumple es ocultar y mostrar una fila.

Lo que necesito es modificar ese script, pero el tema es que no se como, a ustedes los especializados en el tema seguro les resultara fácil pero para mi es chino básico.

Aca el script:

Código HTML:

<script>
function cambiarDisplay(id) {
  if (!document.getElementById) return false;
  fila = document.getElementById(id);
  if (fila.style.display != "none") {
    fila.style.display = "none"; //ocultar fila
  } else {
    fila.style.display = ""; //mostrar fila
  }
}</script>

Aca el HTML:

Código HTML:

<table width="300" height="30" border="0" cellpadding="0" cellspacing="0">
                          <tr id="row1" onClick="cambiarDisplay('row2')">
                            <td background="menu/agitadores-on.gif"></td>
                          </tr>
                        </table>
                      <table width="300" height="100" border="0" cellpadding="0" cellspacing="0">
                        <tr id="row2" style="display:none">
                          <td><img src="menu/agitadores-sub.gif" width="300" height="120" /></td>
                        </tr>
                      </table>

Para lo que lo utilizo es un listado de productos, bastante extenso, y necesitar resumir eso para que al cliente no le resulte tediosa la navegación.

Lo que necesito modificar, es que cuando este oculto, no me quede el espacio en blanco de lo que ocupa la tabla que esta oculta.
Y cuando esta oculto necesito cambiar la imagen agitadores-on.gif por agitadores-off.gif.

Aca la imagen:

lair · #2 (**permalink**) 23/07/2009, 10:19

intenta agregar en tu estilo position:relative

Avatar810 · #3 (**permalink**) 23/07/2009, 10:34

si estas usando el codigo tal cual lo pones no debes tener ese problema

Código HTML:

<script>
function cambiarDisplay(id) 
{
	if (!document.getElementById) 
		return false;
	fila = document.getElementById(id);
	if (fila.style.display != "none") 
		fila.style.display = "none"; //ocultar fila
	else 
		fila.style.display = ""; //mostrar fila
}
</script>
<body>
<table width="300" height="30" border="1" cellpadding="0" cellspacing="0">
	<tr id="row1" onClick="cambiarDisplay('row2')">
		<td background="menu/agitadores-on.gif"></td>
	</tr>
</table>
<table width="300" height="100" border="0" cellpadding="0" cellspacing="0">
	<tr id="row2" style="display:none">
		<td><img src="ima2.jpg" width="360" height="241" /></td>
	</tr>
</table>
<table width="300" height="100" border="0" cellpadding="0" cellspacing="0">
	<tr id="row3" style="display:">
		<td><img src="ima1.jpg" width="360" height="241" /></td>
	</tr>
</table>
</body>

Si tienes un detalle particular, coloca tu codigo y vemos en donde esta el detalle
Saludos

djaevi · #4 (**permalink**) 23/07/2009, 10:38

Ahi copie tu codigo el problema del espaciado es que como le estas dando un tamaño fijo a la segunda tabla por mas que esta este vacia siempre va a tener la misma dimension por lo cual deberias sacarle las opciones width y height o al menos la height asi se ajusta bien de arriba hacia abajo. Yo lo probe asi y el espacio se ajusta bien.
con respecto al cambio de imagen deberias usar un estilo para cambiar la imagen de fondo a la celda y usar una funcion muy parecida a la que ya tenes pero cambiando los parametros style.backgroundImage

Saludos

Avatar810 · #5 (**permalink**) 23/07/2009, 10:42

UPS

Pues a mi no me fallo, olvide que la mayoria usa IE o FireFox supongo que ahi si ha de fallar...
Bueno una vez corregido pruebalo en al menos 2 si puedes 3 navegadores para que veas como trabaja...

gustax · #6 (**permalink**) 23/07/2009, 13:09

Me quedo perfecto, lo unico que me falta es el cambio de imagen es decir cuando despliego el menu que en vez de aparecer la imagen "menu/agitadores-on.gif" que aparezca "menu/agitadores-off.gif", que no tengo idea como hacerlo.
Podrian hecharme una mano ?