Menus Behind Flash
Have you ever tried to include a Flash movie in an HTML page that contains a drop-down menu? Have you noticed that the menu, when triggered, has dropped behind the Flash movie? You probably have tried to change the HTML code to include the menu after the Flash movie. You may even have tried to change the z-index of the menu to 50000 with no different results.
Well, it is not the menu's fault. By default, the Flash movie actually exists in a display instance that lives above the core browser display window. It just appears to be in the browser window. Why? Because it is most efficient for Flash to draw this way. So, Flash is drawing independently of the browser's HTML rendering surface and this is why your drop-down menus will drop behind the Flash movie.
Is there a solution? Fortunately, yes.
A Flash object has a property called Windowless Mode that is controlled with the wmode parameter in the object tag. The Flash player supports three windowless mode options:
- Window: This is the default property that provides the fastest animation performance.
- Opaque: By using the Opaque property the browser tells the Flash player where to draw onto the browser's surface and the Flash movie will be treated just like any other HTML element. Now, you can use the z-index property.
- Transparent: This is similar to Opaque but draws the Flash movie with a transparent background. This allows elements behined the Flash movie to show through transparent parts of it. With this property, animation performance might be slower.
So by changing the mode to Opaque or Transparent, your menus will be happier. To do so, add the wmode parameters to the HTML code. For example:
<object ... >
<param name="movie" value="my_movie.swf" />
<param name="wmode" value="opaque" />
<embed src="my_movie.swf" wmode="opaque" ... />
</object>
Leave a Comment