Ver Mensaje Individual
  #7 (permalink)  
Antiguo 23/06/2010, 14:04
all-ill
 
Fecha de Ingreso: junio-2002
Mensajes: 750
Antigüedad: 22 años, 5 meses
Puntos: 22
Respuesta: ayuda con codigo js y htm css

Se trata de combinar el parámetro wmode="transparent" o wmode="opaque" (quizá mejor usar opaque porque creo que hace trabajar menos a flash, por lo de no tener que interpretar el canal alpha...) de flash con la propiedad z-index de CSS.
Pongo un ejemplo que acabo de hacer (para otros ejemplos, por si me dejo algo, puedes buscar en Internet, creo que lo llaman css overlap):
Código HTML:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.     "http://www.w3.org/TR/html4/strict.dtd">
  3.     <title>Ejemplo capa superpuesta sobre animaciones flash</title>
  4.     <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
  5.    
  6. </head>
  7.     <div class="overlap">capa superpuesta</div>
  8.     <div><object width="640" height="385"><param name="movie" value="http://www.youtube-nocookie.com/v/ziDeUbifKIM&hl=en_US&fs=1&color1=0x3a3a3a&color2=0x999999"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube-nocookie.com/v/ziDeUbifKIM&hl=en_US&fs=1&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385" wmode="transparent"></embed></object></div>
  9. </body>
  10. </html>
Código CSS:
Ver original
  1. .overlap{z-index:1000;height:200px; width:250px; background-color:black; position:absolute; left:500px; top:100px; color:white; text-align:center; font-size:2em;overflow:hidden;}

El primer punto importante es la propiedad z-index. La de la capa que quieras poner por encima de otras debe tener un z-index superior a las demás.
El otro punto a destacar es la inclusión del parámetro wmode en el código usado para cargar el archivo de flash. En el código que he copiado de youtube he añadido lo siguiente:
<param name="wmode" value="transparent"></param>
y dentro de la etiqueta embed wmode="transparent"
Aunque en lugar de transparent se puede usar opaque.

Ver ejemplo (archivo html subido a mediafire)

Última edición por all-ill; 23/06/2010 a las 17:25 Razón: añadida nota sobre wmode opaque