Introduction
Some time, I have to work on flash which should be inside a div so that I can hide some portion of flash and some time I have to use flash in div so that I can position the flash in the center of a page.
Background
What is Div? Let's start with what a div tag is?
Div tag create a division or a section within a HTML Document
Div tag generally use CSS styles to create a particular format.
Div tag is supported in all major browsers like Mozilla Firefox, Internet Explorer, opera etc.
How to work with a Div tag:
Syntax of Div tag:
<DIV ALIGN="LEFT"|"CENTER"|"RIGHT" CLASS="styleClass" ID="id of divtag" LANG="ISO" STYLE="style" >
Any element, text etc…
</div>
For example:
<div align="left" id="mydiv" >
This is an example div
</div>
In div tag "id" attribute can be used in JavaScript to access div tag for example
Var myobj=document.getelementbyid("mydiv") ;
In myobj variable now we have div object and we can get and set the attribute values of it. For example myobj.style.display="hidden".
Use div tag with flash movie:
Flash is vector animation software, originally designed to create animations for display on web pages. Flash software creates a file with ".swf" extension. This is used in an html page with an <object> tag.
How to cover flash movie with div tag:
For covering or overlapping flash movies with div tag need style attributes.
Create a Style in head tag:
<style>
.flashdivclass{
z-index:10;
height:15px;
background:#f4f4f4;
border-left:1px solid #b9b8b8;
border-top:1px solid #b9b8b8;
width:448px;
position:absolute;
text-align:right;
}
</style>
In body tag
<div class="patch_small">
ravinder
</div>
<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="300" height="300" id="banner" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="wmode"value="transparent"/>
<param name="movie" value="banner.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /> <embed src="banner.swf" quality="high" bgcolor="#000000" width="300" height="300" name="banner" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
The above code in Internet explore will show the div tag over the Flash movie. But in Mozilla it will not work. The “wmode” attribute works with Internet Explore but not in Mozilla.
So to make it work in both browsers I have used <Embed> tag
<embed src="banner.swf" width="300" height="300" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" wmode="transparent"> </embed>
<EMBED> puts a browser plug-in in the page.
For more articles visit www.ravinderweb.com