Welcome to W3Courses
 Like Us on Facebook

Flash and JavaScript Conflict: Javascript Menu goes behind the flash file

Sometimes if you use flash and javascript on the same page, you will have some problem with your layers or javascript. The most common problem is that the javascript menu or other control goes behind the flash file. I am sure you have tried many things like changing the z-index or putting flash more down but the solution is simpler than that. How? You have to make your flash transparent and everyting will be okay.

Browsers that support flash transparency:
Internet Explorer 3 or higher (Windows)
Internet Explorer 5.1 or higher (Macintosh)
Netscape 7.0 or higher
Mozilla 1.0 or higher
AOL
CompuServe

There are two ways to make flash file transparent, one is to export as a transparent file when you are publishing from Macromedia Flash and another to insert a line of code in the HTML. We will cover both ways in this tutorial.

First Method

Open the source code of your page and you will see a code similar to the following:

 

 CODE
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="200" height="100">
<param name="movie" value="images/trans.swf">
<param name="quality" value="high">
<embed src="images/trans.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="100"></embed>
</object>

Add the bolded part of the following code into your code. The result should look like the following

 

 CODE
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="200" height="100">
<param name="movie" value="images/trans.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="images/trans.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.
com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="100"></embed>
</object>

Second Method

Open a the flash file in your Macromedia Flash and go to File > Publish Settings or press Ctrl+Shift+F12. You should see the following window. In this window go to HTML tab and select Transparent Windowless from Window Mode and press Publish.

Now your file is saved as a transparent swf.

Share