Ver Mensaje Individual
  #10 (permalink)  
Antiguo 30/08/2007, 15:15
Avatar de Microbito
Microbito
 
Fecha de Ingreso: octubre-2001
Ubicación: Cd. Juárez, Chihuahua, México
Mensajes: 829
Antigüedad: 22 años, 6 meses
Puntos: 6
Re: objeto flash en css

Para poner un SWF de fondo, tienes que usar el comando Z-Index, el archivo flash dentro de una capa con parametro "z-index: 0" y el contenido en "z-index: 1"


Aca el ejemplo:

Pones una capa que contedra todos los elementos"

Código:
<div class='contenedor"

aca todos los elementos

</div
El archivo SWF debe estar dentro de una capa, dentro de ese contenedor:

Código:
<div class="capafondo">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="800" height="200">
      <param name="movie" value="archivo.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <embed src="archivo.swf" width="800" height="200" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="opaque"></embed>
    </object>

</div>
Asegurate de poner la opcion OPAQUE en el parametro WMODE.

ahora pones una capa con todo el contenido del sitio que vca encima del flash, tambien dentro del contenedor principal:

Código:
<div class="contenido">
aca todo tu contenido.
</div>


en en codigo CSS tienes que especificar lo siguiente:


Código:
<style>

style>

.capafondo {z-index: 0;position:relative; left:0px; top:0px;}
.contenido {
	z-index: 1;
	position:absolute;
	left:0px;
	top:1px;
	width: 801px;
	height: 200px;
}
.contenedor {width:800px; height:200px; position:relative; margin:auto;}
</style>



este es el codigo completo:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>

.capafondo {z-index: 0;position:relative; left:0px; top:0px;}
.contenido {
	z-index: 1;
	position:absolute;
	left:0px;
	top:1px;
	width: 801px;
	height: 200px;
}
.contenedor {width:800px; height:200px; position:relative; margin:auto;}
</style>


</head>

<body>
<div class="contenedor">
<div class="capafondo">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="800" height="200">
      <param name="movie" value="archivo.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <embed src="archivo.swf" width="800" height="200" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="opaque"></embed>
  </object>

</div><div class="contenido">
aca todo tu contenido.
</div>
</div>
</body>
</html>
Prueba y dime si te funcionó.

Última edición por Microbito; 30/08/2007 a las 15:34