Adding div layer in front of flash

If you want to add a layer in front of a flash object, e.g. to add the ability to make the flash clickable, or put an overlay above a flash, make sure to insert

<param name=”wmode” value=”transparent” />

as object parameter.

The div layer has to placed with a css style attribute whereever you need it. In the example I let the div cover the entire side.

For IE I added a blank gif.

Here is an example that can be checked out on oscar-koeln.de/flash:

<object id=”fsIntro” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,24″ width=”1280″ height=”1024″>

<param name=”movie” value=”flash.swf” />

<param name=”quality” value=”high” />

<param name=”menu” value=”false” />

<param name=”wmode” value=”transparent” />

<!–[if !IE]> <–>

<object data=”flash.swf” width=”1280″ height=”1024″ type=”application/x-shockwave-flash”>

<param name=”quality” value=”high” />

<param name=”menu” value=”false” />

<param name=”wmode” value=”transparent” />

<param name=”pluginurl” value=”http://www.macromedia.com/go/getflashplayer” />

Alternative Text.

</object>

<!–> <![endif]–>

</object>

<div style=”position:absolute; top:0px; left:0px; width:1280px; height:1024px;”>

<a style=”position:absolute; top:0px; left:0px; width:1280px; height:1024px;” href=”/start”>

<img style=”position:absolute; top:0px; left:0px; width:1280px; height:1024px;” src=”/links/include/blank.gif” alt=””/>

</a>

</div>

It took me a while to figure that out. Hope, it helps.

Tags: dev, flash, html

2 Responses to "Adding div layer in front of flash"

Leave a Comment