cambiar indice Z con java

mauro770 · #1 (**permalink**) 11/08/2009, 16:42

HOLA QUE TAL QUERIA PREGUNTAR SI ALGUIEN SABRIA COMO CAMBIAR EL INDICE Z DE UN DIV O UNA CLASS CSS.

LA MANO VIENE MAS O MENOS ASI ...tengo 5 div con enlaces de imagenes dentro
cada uno tiene una regla CSS distinta para facilitar la manipulacion la cuestion seria que esos 5 div estan uno encima del otro y yo hago que aparescan con una
funcion , el problema es q al estar uno encima del otro siempre me toma el ultimo div y me desabilita los otros , es decir paso el mouse para que aparesca el div 1 , aparecen las imagenes todo pero no les puedo hacer click ya que el div 5 (invisible pero existente) me taba sin dejarme hacerle click eso pasa igual con los div 2 3 y 4 . lo que necesitaria es alguna forma de cambiar el indice Z del div que esta actualmente visible a uno mas alto q los demas.

Código PHP:

      function cerrar(id){ 
        document.getElementById(id).style.display="none"; 
    } 
    function abre(id){ 
        document.getElementById(id).style.display="block"; 
    } 
     
function cerrartd(){ 
cerrar('div1'); 
cerrar('div2'); 
cerrar('div3'); 
}

y luego el codigo html lo tengo asi

Código PHP:

  <div id="div1"> 
<a href="#"><img href="#"/></a> <a href="#"><img href="#"/></a> 
</div> 
<div id="div2"> 
<a href="#"><img href="#"/></a> <a href="#"><img href="#"/></a> 
</div> 
<div id="div3"> 
<a href="#"><img href="#"/></a> <a href="#"><img href="#"/></a> 
</div> 
 
<a href="#" onmouseover="javascript: cerrartd(); abre('div1');"> 
<a href="#" onmouseover="javascript: cerrartd(); abre('div2');"> 
<a href="#" onmouseover="javascript: cerrartd(); abre('div3');">

en teoria deberia ser algo asi oO:

Código PHP:

  <a href="#" onmouseover="javascript: cerrartd(); reducir_indicez_atodos();  aumentar_indicez_estediv('div1');abre('div1');">

espero haberme explicado , ya se que es un tema bastante complicado pero espero vuestra ayuda sea cual sea : )
un saludo

zerokilled · #2 (**permalink**) 11/08/2009, 17:15

tienes que arreglar los ID's de los div's, no concuerdan con el ID pasado como argumento a las funciones cerrar y abre. acerca del zIndex, pues no te funcionara a no ser que los elementos sean posicionados absolutamente, lo cual en tu codigo no veo que sean asi.

mauro770 · #3 (**permalink**) 11/08/2009, 17:26

el tema de las id estan bien en el archivo sino qu ak los coloque mal ... y el tema de posicion absoluta lo tengo en la hoja externa del CSS y estan en absoluto , sabes como cambiarlo ?

zerokilled · #4 (**permalink**) 11/08/2009, 17:31

para cambiar el zIndex toma referencia del elemento seguido de style.zIndex. ejemplo, document.getElementById(id).style.zIndex = un valor numerico. ahora bien, no me hace sentido para que cambiar el zIndex si con display = "none" el elemento queda oculto de modo que no debe interferir con los demas.

mauro770 · #5 (**permalink**) 11/08/2009, 17:41

Gracias ahora voy a chequear como utilizo esa informacion, pero con "display=none" sucede que tengo imagenes con hipervinculos, y las tengo acomodadas en el centro exactamente una encima de la otra, lo cual hace que la ultima mas aya de que este "invisible visualmente" el codigo continua existente interfiriendo de esta manera con las capas que estan por detras.-

Ahora voy a chequear el codigo que me recomendas, pero como no entiendo demaciado de java, lo mas posible es que dentro de un rato te este preguntando como emplearlo.-

si me podes pasar un ejemplo con la posible solucion, estaria enormemente agradecido....

zerokilled · #6 (**permalink**) 11/08/2009, 20:03

la verdad no se si estoy comprendiendo bien el tema, lo he releido ya varias veces. segun entiendo, el problema es que cuando pasas el raton sobre un enlace, para que aparezca la capa deseada, la capa anterior no te deja presionar sobre los enlaces de la nueva capa. segun tu, porque la capa anterior esta invisble pero sobre la nueva capa. lamento que sean bien cutre, a continuacion dos ejemplos uno utilizando el zIndex y el otro solo utilizando el display. pues como ya habia mencionado, supone que con display no tengas problema. en cualquiera de los dos ejemplos puedo presionar sobre los enlaces sin conflicto con otro DIV.

version zIndex:

Código:

<html><head><style type="text/css">
div#container{
position:relative;
border:1px solid black;
float:left;
width:200px;
}

div#container div{
position:absolute;
background:#999;
padding:2em;
border:1px solid blue;
}
</style>
<script type="text/javascript">
zlevel = 1;
    function cerrar(id){
// realmente esta funcion no la necesitabas en esta version;
//        document.getElementById(id).style.display="none";
    }
    function abre(id){
        document.getElementById(id).style.zIndex = zlevel++;
    }
    
function cerrartd(){
cerrar('div1');
cerrar('div2');
cerrar('div3');
}  
</script></head>
<body>
<div id="container">
<div id="div1">
<a href="1">img1</a> <a href="2">img2</a>
</div>
<div id="div2">
<a href="3">img3</a> <a href="4">img4</a>
</div>
<div id="div3">
<a href="5">img5</a> <a href="6">img6</a>
</div></div>

<a href="#" onmouseover="cerrartd(); abre('div1');">a</a>
<a href="#" onmouseover="cerrartd(); abre('div2');">b</a>
<a href="#" onmouseover="cerrartd(); abre('div3');">c</a>
</body></html>

version display, solo tienes que cambiar las funciones correspondientes del script:

Código:

    function cerrar(id){
        document.getElementById(id).style.display="none";
    }
    function abre(id){
        document.getElementById(id).style.display="block";
    }

mauro770 · #7 (**permalink**) 13/08/2009, 00:52

de maravilla ^^ me anda de pelos , muchas gracias zerokilled por tu ayuda en este y los de3mas post .

saludos .