Making Flash Obey Z-Index

Filed under HTML

A common problem with Flash is that it usually will not listen to the z-index of the page. This causes drop down navigation items to appear under the flash. However, there is a neat way to make flash behave correctly while respecting the XHTML standard.

We will use the script I put together in the Simple XHTML Flash Embedding article.

The parameter Flash needs is called “wmode.” We need to set “wmode” to ‘transparent.’

<object type="application/x-shockwave-flash" data="yourswf.swf" width="100" height="100">
    <param name="movie" value="yourswf.swf" />
    <param name="wmode" value="transparent" />
    <img src="no-flash.png" width="100" height="100" alt="" />
</object>

note: wmode can be set as an inline attribute but will break the pages validation.

“Wmode” is known to cause some problems, so check in all browsers before you go live with anything.

| May 22, 2008