Web系のこととかー。

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>
§111 · 2月 8, 2010 · デザイン_HTML_CSS · · [Print]

Leave a Reply