Flashの上に画像やテキストを重ねて表示できないかなーと思って試してみたら普通にできたのでまとめ。とりあえずサンプルを見るのがわかりやすい。
サンプル
HTMLテキストです。
重ねて表示する方法：HTML + CSS
大事なのはFlashを描画する<object>タグの部分。
<param name="wmode" value="transparent" /> <embed wmode="transparent" ... />
この2つをしているすればIE6〜／Fx3〜／Safari3〜／Chromeで、無事にDIVによるテキストの重ね合わせ・背景色の重ね合わせ、透過PNGの重ね合わせを表示できた。透過PNGに関してはIE6対策にJavaScriptのライブラリを導入している。
今回初めてこの透過ライブラリ使ってみたけど、結構良いかもしれない。
#test_flash{
position:relative;
}
#test_hoge{
position:absolute;
top:0px;
left:100px;
padding:10px;
width:300px;
color:#00f;
}
#test_hoge span{
background-color:#eeeeee;
}
<script src="/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg');<!-- IE6の透過PNG対策 -->
</script>
<![endif]-->
<div id="flash">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="test" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="wmode" value="transparent" />
<param name="movie" value="http://zaru.tofu-kun.org/wp-content/uploads/2010/02/test.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed wmode="transparent" src="http://zaru.tofu-kun.org/wp-content/uploads/2010/02/test.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="test" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_jp" />
</object>
<div id="hoge">
<p>HTMLテキストです。</p>
<img src="http://zaru.tofu-kun.org/wp-content/uploads/2010/02/img.png" />
</div>
</div>
zaru