SWFObject is a commonly used JS library for instantiating Flash objects universally. Flash objects are considered to be “windows” on top of the browser and this is why they cover the submenus by default. This can be easily changed however. SWFObject offers two distinct methods to embed Flash Player content:
- The static publishing method embeds both Flash content and alternative content using standards compliant markup, and uses JavaScript to resolve the issues that markup alone cannot solve.
- The dynamic publishing method is based on marked up alternative content and uses JavaScript to replace this content with Flash content if the minimal Flash Player version is installed and enough JavaScript support is available (similar like previous versions of SWFObject and UFO).
If you use the static publishing method you just have to add the transparent parameter in SWFObject. For example if the code of SWFObject looks like the following:
<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");
</script>
you have to add the following line of code:
so.addParam("wmode", "transparent");
so that your code look like the following:
<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");
so.addParam("wmode", "transparent");
</script>
If you use the dynamic publishing method you need to apply the transparent parameter too. In this method you use the embedSWF function so as to embed your SWF with JavaScript. The definition of embedSWF is the following: swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes, callbackFn) where:
- swfUrl (String, required) specifies the URL of your SWF.
- id (String, required) specifies the id of the HTML element (containing your alternative content) you would like to have replaced by your Flash content.
- width (String, required) specifies the width of your SWF.
- height (String, required) specifies the height of your SWF.
- version (String, required) specifies the Flash player version your SWF is published for (format is: "major.minor.release" or "major").
- expressInstallSwfurl (String, optional) specifies the URL of your express install SWF and activatesAdobe express install. Please note that express install will only fire once (the first time that it is invoked), that it is only supported by Flash Player 6.0.65 or higher on Win or Mac platforms, and that it requires a minimal SWF size of 310x137px.
- flashvars (Object, optional) specifies your flashvars with name:value pairs.
- params (Object, optional) specifies your nested object element params with name:value pairs.
- attributes (Object, optional) specifies your <object>'s attributes with name:value pairs.
- callbackFn (JavaScript function, optional) can be used to define a callback function that is called on both success or failure of embedding a SWF file
So if the code of your SWFObject looks like the following:
<script type="text/javascript">
swfobject.embedSWF("myswfobject.swf", "mycontent", "935", "300", "9.0.0");
</script>
you have to replace it with the following one:
<script type="text/javascript">
var expressInstallSwfurl = {};
var flashvars = {};
var params = {wmode:"transparent"};
var attributes = {};
swfobject.embedSWF("myswfobject.swf", "mycontent", "935", "300", "9.0.0", expressInstallSwfurl, flashvars, params, attributes);
</script>
By adding the transparent parameter as described above, the submenus will always appear above SWFObject objects on all browsers.
