Como mostrar una capa sobre una capa en flash

Desde hace ya un buen tiempo andaba pensando si era posible mostrar algún contenido html sobre una capa en flash. Y pues la solución es sencilla:

<html>
<body>
<div style="position:relative" >
<div style="z-index: 1; position:absolute; left:20; top:40; color:#0f0; border:1px solid #000"><b>texto sobre el flash</b></div>
<div style="z-index: -1" >
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1000" height="240" codebase="http://active.macromedia.com/flash5/cabs/swflash.cab#version=5,0,0,0">
<param name="movie" value="top_banner.swf">
<param name="play" value="true">
<param name="loop" value="true">
<param name="wmode" value="transparent">
<param name="quality" value="high">
<param name="bgcolor" value="#000000" />
<embed src="top_banner.swf" width="1000" height="240" play="true" loop="true" wmode="transparent" bgcolor="#000000" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?p1_prod_version=shockwaveflash">
</embed>
</object>
</div>
</div>
</body>
</html>

Lo importante es establecer el parametro WMODE en ‘transparent’, que por defecto viene como ‘window’ y jugar con el z-index de las capas, a mayor z-index asignado a una capa, ésta se pondrá mas arriba y cubrirá a las otras, en éste caso nos interesa cubrir a la capa que tiene el swf flash. Por cierto, en el ejemplo puedes probar con cualquier archivo swf. Solo reemplazen el código que aparece de color verde.

Leave a Reply Cancel reply