How to use display none and block for a flash object?

Question

Hi, I have embedded some flash like this:

<div id="id" style="display:none;">
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="392" height="321" id="logo" align="middle" style="display:none">
     <param name="allowScriptAccess" value="sameDomain" />
     <param name="allowFullScreen" value="false" />
     <param name="movie" value="file.swf" />
     <param name="quality" value="high" />
     <param name="bgcolor" value="#000000" />
     <embed src="file.swf" quality="high" bgcolor="#0000000" width="392" height="321" name="logo" align="middle" allowscriptaccess="sameDomain" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>
</div>

It is in div and when I first make style:display=none and later block it does not work on javascript function call. Is there any way to hide and display the flash object div for javascript function call.

This is the javascript:

document.getElementById("id").style.display = "block";

Thanks in advance.

Answer 1

I suspect what you need to do is add an extra parameter:

<param name="wmode" value="opaque" />

as Flash defaults to rendering the movie in a borderless window overlaid onto the page, ie outside the reach of the DOM.

Setting the windowing mode to "opaque" or "transparent" causes it to be rendered inline, meaning you can hide and show it. You'll also need to do this if you want to put things over the top of it, such as another hidden <div> as Flash's default behaviour takes it out of the normal z-order.