Hola
Tengo un problemilla estoy haciendo unas animaciones muy basicas en DHTML hay un poco de javascript css y html.
el codigo és este:
Código HTML:
<body>
<!-- barra herramientas -->
<div id="barra" style="position:absolute; width:31px; height:475px; left: 0px; top: 0px; visibility: visible; z-index: 0;">
<img src="images/tools/BarraLateral.png" width="31px" height="475px">
</div>
<div id="ocultar" style="position:absolute; width:25px; height:25px; left: 3px; top: 3px; visibility: visible; z-index: 3;">
<a href="#"><img src="images/tools/ocultar.png" style="width:25px; height:25px;" border="0" onClick="ensenyar('i3')"></a>
</div>
<!-- tot -->
<div style="width:510px; height:475px; overflow:hidden; left: 31px; position: absolute;top: 0px;">
<div id="imgcos" style="width:510px; height:475px;">
<!-- fixe -->
<div id="base" style="position:absolute; width:510px; height:475px; left: 0px; top: 0px; visibility: show; z-index: 0; "><img src="images/base/phloemxylem_base.png" width="510px" height="475px" ></div>
<div id="base2" style="position:absolute; width:510px; height:475px; left: 0px; top: 0px; visibility: show; z-index: 8; "><img src="images/base/phloemxylem_b3.png" width="510px" height="475px" ></div>
<div id="i3" style="position:absolute; display:true; width:510px; height:475px; left: 0px; top: 0px; visibility: show; z-index:9"><img src="images/base/phloemxylem_top.png" width="510px" height="475px" border="0" usemap="#top"></div>
<!-- movible -->
<div id="i1" style="display:none;">
<div id="b1" style="position:absolute; left: 0px; top: 0px;z-index: 3; "><img id="img1" src="images/base/phloemxylem_b1.gif" width="510px" height="475px"></div>
<div id="b4" style="position:absolute; left: 0px; top: 0px;z-index: 3; "><img id="img1" src="images/base/phloemxylem_b4.png" width="510px" height="475px"></div>
<div id="top1" style="position:absolute; width:510px; height:475px; left: 0px; top: 0px; visibility: show; z-index:9"><img src="images/base/phloemxylem_top1.png" width="510px" height="475px" border="0" usemap="#top1"></div>
</div>
<div id="i2" style="display:none;">
<div id="b2" style="position:absolute; left: 0px; top: 0px;z-index: 3; "><img id="img1" src="images/base/phloemxylem_b2.gif" width="510px" height="475px"></div>
<div id="b5" style="position:absolute; left: 0px; top: 0px;z-index: 3; "><img id="img1" src="images/base/phloemxylem_b5.png" width="510px" height="475px"></div>
<div id="top2" style="position:absolute; width:510px; height:475px; left: 0px; top: 0px; visibility: show; z-index:9"><img src="images/base/phloemxylem_top2.png" width="510px" height="475px" border="0" usemap="#top2"></div>
</div>
</div>
<!-- √°reas -->
<map name="top">
<area shape="rect" coords="366,36,489,65" href="#" onClick="ensenyar('i1')">
<area shape="rect" coords="366,75,489,104" href="#" onClick="ensenyar('i2')">
</map>
<map name="top1">
<area shape="rect" coords="366,36,489,65" href="#" onClick="ensenyar('i1')">
<area shape="rect" coords="366,75,489,104" href="#" onClick="ensenyar('i2')">
<area shape="circle" coords="164,228,7" href="#" onClick="ensenyar2('txt1')">
</map>
<map name="top2">
<area shape="rect" coords="366,36,489,65" href="#" onClick="ensenyar('i1')">
<area shape="rect" coords="366,75,489,104" href="#" onClick="ensenyar('i2')">
<area shape="circle" coords="163,142,7" href="#" onClick="ensenyar2('txt2')">
</map>
</div>
</div>
<!-- capas idiomas -->
<div id="txt1" style="display:none;">
<div id="ba1" style="position:absolute; left: 31px; top: 0px;z-index: 6; "><img id="img1" src="images/base/phloemxylem_b6.png" width="510px" height="475px"></div>
<div id="bt1" style="position:absolute; width:510px; height:475px; left: 31px; top: 0px; z-index: 6">
<a href="#">
<script >document.write('<IMG SRC="images/' + idlang + '/phloemxylem_i1.png">')</script>
</a>
</div>
</div>
<div id="txt2" style="display:none;">
<div id="ba2" style="position:absolute; left: 31px; top: 0px;z-index: 6; "><img id="img1" src="images/base/phloemxylem_b7.png" width="510px" height="475px"></div>
<div id="bt2" style="position:absolute; width:510px; height:475px; left: 31px; top: 0px; z-index: 6">
<a href="#">
<script >document.write('<IMG SRC="images/' + idlang + '/phloemxylem_i2.png">')</script>
</a>
</div>
</div>
</body>
</html> Como podeis ver en algunos div son contenedores para que todos hagan lo mismo a la vez.
Eso me da el problema que cada div del interior tiene z-index diferentes.
(exemplo: en el id="i1" hay capas de z-index 3y la top1 que está en la z-index 9, el en txt1 todas estás en z-index 6 y por lo tanto deveria quedar por encima de las capas b y por debajo de la top. Eso me lo hace, el probema es que lo hace después de ejecutar la función, mientras dura la función el div id="txt1" queda por debajo de todas las capas del id="i1" y cuando termina me las coloca en su sitio.)
No se si me he exresado con demasiada claridad (cualquier duda pregunten), pero agradeceria cualquier pista o solución que pudieran darme.
Muchas gracias