Monday, May 10, 2021
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

Organic Food and Its Importance for Our Health and Our Planet

Food constitutes one of the pillars of human survival, besides being a source of our energy. Over the years of evolution, food...

List of Organic Vegetables Price in Delhi from Organic Food Suppliers

After facing the pandemic and realizing the need to build strong immunity in our bodies, we today witness a strong push towards...

Top Gift Ideas To Celebrate This Christmas Day With Your Family

Christmas is celebrated every year on the 25th of December. It brings joy and cheers to our life. People celebrate Christmas to...

KBC Question Categories 2020

Kaun Banega Crorepati is one of the most popular t.v game shows in India. The show takes its inspiration from the British...

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”.