ansaurus

Question

How to embed a swf on top of a html page?

Answer 1

A:

I believe the problem with this is that the CSS doesn't work well with <object /> tags. The swfobject.embedSWF turns the <div id="header"></div> into an <object /> tag with a bunch of attributes that might be effecting the CSS. If you create a wrapper DIV around the header DIV and apply the CSS to the wrapper DIV, everything works better. You also need to add 100% width and height in the CSS. Here's the revised source:

<script>
 swfobject.embedSWF("swf/float.swf", "header", "100%", "100%", "9.0.0");
</script>

<body bgcolor="#000000">
 <div id="wrapper">
  <div id="header"></div>
        </div>
 <div id="shell">
  things in my html
 </div>
</body>

#wrapper {
 position:absolute;
 z-index:100;
 width:100%;
 height:100%;
}

Adam 2008-11-18 22:14:42

it's still not working right, after i add the wrapper, it will cut the page to half, half is the swf and half is the html. also if I add the width:100% and height:100%, all of my buttons are disabled...

christinelalala 2008-11-18 22:20:56

Answer 2

+4 A:

Once you get your sizing to work properly you will need to set the wmode to transparent to be able to see what's behind the flash, if you don't it's background will be opaque.

This is a quick copypaste from the swfobject docs, but it should get the point across:

<script type="text/javascript">

var flashvars = {};
var params = {wmode : "transparent"};
var attributes = {};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

grapefrukt 2008-11-18 23:31:35

ansaurus

tags:

views:

answers:

How to embed a swf on top of a html page?

related questions