HTML on top of Flash |  |  |
|
- In the object/embed tag, set parameter
wmode to transparent
- Give each div layer a stacking depth using
z-index
- Do not use a z-index lower than 0
See
demo
Download demo source code:
HTML_on_top_of_Flash_Test.zip
HTML source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML on top of Flash</title>
</head>
<body bgcolor="#ffffff">
<div style="z-index:1; position:absolute; left:30px; top:90px; color:blue; font-weight:bold; border: 1px solid blue;">Text below Flash movie</div>
<div style="z-index:3; position:absolute; left:30px; top:135px; color:red; font-weight:bold; border: 1px solid red;">Text above Flash movie</div>
<div style="z-index:2; position:relative; width:200px; height:200px; border: 1px solid #666;">
<!--url's used in the movie-->
<!--text used in the movie-->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="200" height="200" id="HTML_on_top_of_Flash_Test" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="HTML_on_top_of_Flash_Test.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent">
<embed src="HTML_on_top_of_Flash_Test.swf" quality="high" bgcolor="#ffffff" wmode="transparent" width="200" height="200" name="HTML_on_top_of_Flash_Test" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</body>
</html>
HTML_on_top_of_Flash_Test.zip