Hola a todos, tengo un problemilla con las profundidades de las capas en mi HTML, a ver si alguien consigue decirme como puedo solucionarlo.
El problema que tengo es que la capa "tutorial", aunque le ponga z-index=2 siempre me aparece por debajo de la capa "FlashDiv", hay alguna forma de hacer que aparezca por encima? he probado a forzar el z-index de todas las capas para que se vea por encima, pero no hay forma y ya no sé por donde tirar.
Mi código es el siguiente:
Código HTML:
<div id="background" style="background-image:url('http:localhost/images/myimage.png');background-repeat:no-repeat;background-position:center;width:100%;height:100%;margin-top:-14px;" >
<div id="FlashDiv" style="position:relative;padding-top:125px;padding-bottom:130px;">
<center>
<object id='FLASH'
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
width="1024px"
height="768">
<param name="AllowScriptAccess" value="always"/>
<param name="src" value="localhost/swf/myFlash.sw"/>
<embed name="MyMovie"
pluginspage="http://www.adobe.com/go/getflashplayer"
src="localhost/swf/myFlash.swf"
width="1024px"
height="768px"
allowscriptaccess="always"/>
</object>
<br />
<div style="width:1024px;">
<asp:Image id="imgWaterMark" runat="server" ImageAlign="Right" onmouseover="javascript:onTutorialOver();" onmouseout="javascript:onTutorialOut();" />
</div>
</center>
</div>
<div id="tutorial" style="position:absolute;z-index:2;display:none;top:100px;left:10px;">
<asp:Image ID="imgTutorial" runat="server" />
</div>
</div>
<script type="text/javascript">
function onTutorialOver() {
document.getElementById('tutorial').style.display = "block";
}
function onTutorialOut() {
document.getElementById('tutorial').style.display = "none";
}
</script> Si alguien puede echarme un cable se lo agradeceré un montón.
Muchas gracias