Sunday, May 22, 2022
Home Technology Programming Displaying HTML DIV above flash content (transparency + z-index)

Displaying HTML DIV above flash content (transparency + z-index)

We have faced this problem many of the times. When we want to display some message on top of all layers on a page or use some feature like jQuery light boxes. Normally the flash file continues to shine through the page. No matter what you do with layering the dom elements using z-index.

See the layering flash content problem definition here.

Before this, people used to dodge this issue with some fixes like hiding the flash area completely and then showing a static image of the html file in its place. Then it gave a semblance of layering flash beneath html content. But since flash 9 we can layer flash elements under html with ease.

See the solved situation where we have content over flash.

What you need to do to achieve this?

Nothing much. You set z-index value to your divs. Say we have a flash div (#flasho), a div for creating a the transparent layer (#transo), and the div for displaying content as a light box (#boxo)

Here is the css for them all. There is also the javascript code for the effect call on button click. (see solved example link above.

<style type="text/css">
#flasho{z-index:0;}
#boxo{top:200px;left:400px;border:1px double #600;width:532px;height:210px;margin:0px;z-index:100;position:absolute;display:none;background:#FFFFFF;}
#transo{background:#000000;height:400px;;width:100%;-moz-opacity:.80;top:0px;left:0px; filter:alpha(opacity=80); opacity:.80;display:none;position:absolute;z-index:99;}
</style>
<script type="text/javascript">
function addthiseffect()
{
document.getElementById('transo').style.display="block";
document.getElementById('boxo').style.display="block";
}
</script>

Now for the flash part we need to do this little addition. Add wmode=”transparent” to the <embed> tag and <param value=”transparent” /> to the <object> tag. See my Flash code below that I have used in my example.

<div style="float:left;width:343px;height:160px;margin-top:7px;z-index:0;">

<OBJECT

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"

WIDTH="343" HEIGHT="160"><PARAM VALUE="flash/course-in-aviation.swf"><PARAM VALUE=high><PARAM VALUE=#00000><param value="transparent" /><EMBED src="flash/course-in-aviation.swf" quality=high bgcolor=#FFFFFF WIDTH="343" HEIGHT="160" wmode="transparent"

NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash"

PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>

</div>

7 COMMENTS

  1. Nice article…i have the same issue….where my flash part is declared within script .its not mentioned in html tag…so am not able to add wmode=”transparent” in to my embed tag…waiting for your reply

Comments are closed.

Most Popular

Turn on Less Secure Apps in Google Workspace Gmail accounts

Sometimes a developer needs to send emails from Gmail or Google Workspace email account or mail server from their website or app....

Construction Financing: Everything You Need to Know

Thinking about building a new home? Construction financing can help. In this article, we will help you figure out...

Set Shipping Rules on Wix

We understand that working on wix control panel can be a little overwhelming to beginners. Despite having 12 years of experience in...

Abacus for Kids FAQs

What is Abacus? Abacus is a "counting frame" or a very old calculating device that helps us to do mathematical...

MY DICTIONARY PROJECT

I have started a new project called the Indic Dictionary. This will cover popular household words in India and what they are called in various languages. Eventually, I will make this an easy to use app where where people can easily find something like “hing in English” or “Tea Tree Oil in Hindi” or “carrom seeds in Urdu”.