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>
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
