Problema con las visibilidades!

moro666 · #1 (**permalink**) 20/07/2012, 07:39

Para empezar pongo el codigo que tengo:

Código HTML:

<html>
<head>

<SCRIPT  Language="JavaScript">
<!--

function Ayuda(identificador)
{
identificador.style.visibility='visible';
}

function Desaparece(identificador)
{
identificador.style.visibility='hidden';
}


function jax(identificador)
{
identificador.style.visibility='visible';
}

function Desaparece(identificador)
{
identificador.style.visibility='hidden';
}



//-->
</SCRIPT>

</head>
<body>

<p>
<a HREF="javascript:Ayuda(alistar)"><img src="Alistar_0.jpg" alt="alistar" width="137" height="222"></a></p>

<DIV Id=alistar Style="background-color:#DDFFDD;width:500px;height:487px;border:2px #FF0000 solid;overflow:auto;position:absolute;top:19px;left:275px;visibility:hidden;">
<p>
Alistar puede empujar es mu pro y grande   
 RUBEN CON EL DREAMWIEBER PUEDES MOVER ESTE RECUADRO DONDE KIERAS K SALGA  <br>  eSTE ES EL MEJOR OBJETO PARA ALISTA POR EJEMPLO<img src="hexdrinker.jpg" alt="objetos" width="472" height="389">


<a href="JavaScript:Desaparece(alistar);">Cerrar</a></p>
</DIV>

<a HREF="javascript:Ayuda(jax1)"><img src="Armsmaster_0.jpg" alt="alistar" width="121" height="208"></a><a HREF="javascript:Ayuda(jax1)"></a></p>

<DIV Id=jax1 Style="background-color:#DDFFDD;width:500px;height:487px;border:2px #FF0000 solid;overflow:auto;position:absolute;top:19px;left:275px;visibility:hidden;">
<p>tc
JAX ES EL PUTO Y EL JEFE   ESTAS Son sus runas<br> El recuadro se le pùde cambiar color marco e <img src="lol01.jpg" alt="LOL" width="540" height="338">


<a href="JavaScript:Desaparece(jax1);">Cerrar</a></p>
</DIV>

</body>
</html>

Vale, si pruebas esto es sus navegadores veran el problema, al hazer click en una de las imagenes (que no he puesto pero ya se ve...) se habre un <div> al lado, si hazemos click en las dos se abren los dos, uno enzima del otro!
Aunque tienen boton de cerrar, me gustaria que al hazer click en uno se cerrara el anterior, y si me lo pueden enseñar para mas de tres imagenes ya esque me quedo flipando!

Gracias por su ayuda!

maycolalvarez · #2 (**permalink**) 20/07/2012, 07:53

tienes Muchos errores:

1 - llamado directo a elementos del DOM sin usar sus funciones, esto no funciona en todos los navegadores, debe usar las colecciones document.forms['name'].elements['name'] o las funciones del DOM document.getElementById('id_element');

2 - tiene funciones repetidas como Desaparece()

3 - se supone que si muestra una capa, oculta la otra

4 - lo ideal en este caso es usar CSS display, evalúelo

moro666 · #3 (**permalink**) 20/07/2012, 07:55

Vale, ke no tengo ni idea de javascript, eso lo he pillao.
De todas formas me puedes mostrar como lo harias tu, me corre algo de prisa poder añadir eso a mi web!

maycolalvarez · #4 (**permalink**) 20/07/2012, 08:01

Cita:

Iniciado por moro666

Vale, ke no tengo ni idea de javascript, eso lo he pillao.
De todas formas me puedes mostrar como lo harias tu, me corre algo de prisa poder añadir eso a mi web!

entonces si se ha dado cuenta ¿que espera para aplicar las modificaciones indicadas?, consulte un manual de javascript, ya le he indicado lo suficiente para que pueda dar solución a su requerimiento, si le sigue fallando postee su avance, no puede esperar a que algún otro usuario le haga el código por usted, porque puede que nadie lo haga y la mayoría no tiene tiempo para ello, incluyéndome.

moro666 · #5 (**permalink**) 20/07/2012, 09:35

Vale mira he hecho algun progreso, mi intencion ya esta resuelta, pero el metodo es muy chapuzero, observa:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
#todo {
border: 1px solid #EAEAEA;  /* Borde de la galería */
padding: 10px;
background: white;  /* Fondo de la galería */
width: 410px;  /* Ancho de la galería */
height: 300px;  /* Alto de la galería */
}
#heroe1 {
border-radius: 3px;
border: 1px solid #F2F2F2;  /* Borde de la imagen */
padding: 3px;
width: 120px; /* Ancho de la imagen */
height: 120px; /* Alto de la imagen */
display:block;
}
#heroe2 {
border-radius: 3px;
border: 1px solid #F2F2F2;  /* Borde de la imagen */
padding: 3px;
width: 120px; /* Ancho de la imagen */
height: 120px; /* Alto de la imagen */
display:none;
}
.miniatura {
width:  60px;  /* Ancho de las miniaturas */
height:  60px;  /* Alto de las miniaturas */
float: left;
cursor: pointer;
padding: 5px;
}
-->
</style>
</head>

<body>
<div id="todo">
<div>
<div id="heroe1">Contenido primer heroe</div>
<div id="heroe2">Contenido segundo heroe</div>
<div>
<img class="miniatura" onclick="javascript:document.getElementById('heroe1').style.display='block';javascript:document.getElementById('heroe2').style.display='none';
" src="URL-IMAGEN-1" />
<img class="miniatura" onclick="javascript:document.getElementById('heroe2').style.display='block';javascript:document.getElementById('heroe1').style.display='none';" src="URL-IMAGEN-2" />

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

Ahora esta como lo queria, el problema es si quiero añadir mas "miniaturas", tal y como lo he hecho esto es exponencial, seguro que hay una forma mas senzilla, pero no llego a mas, xd!