イテルの一日一問

背景にFlashを置く

イテル on 07 23, 2009

3日目の伊藤商店サイトを作った際のチップス。
FLASHを背景にしきたい場合、次のような感じにするといいみたい。

HTMLソース：Swfobjectを使用して配置

<div id="content">
<h1>伊藤商店</h1>
<p>伊藤商店はステキなwebクリエイターです</p>
</div>
<div id="flash">
<div id="flashcontent">
<strong>このサイトでは<a href="http://www.adobe.com/jp/products/flashplayer/" target="_blank">Adobe Flash Player</a>が必要です。</strong><br />
Adobeのサイトより最新の<a href="http://www.adobe.com/jp/products/flashplayer/" target="_blank">FlashPlayerをダウンロード</a>してください。
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("itoshoten.swf", "sotester", "100%", "100%", "10", "#000000");
so.addVariable("flashVarText", "this is passed in via FlashVars for example only");
so.addParam("wmode", "transparent");
so.addParam("scale", "noscale");
so.write("flashcontent");
// ]]>
</script>
</div>

※swfobjectについては過去の記事を参照してちょ。

CSSソース

#content {
	position: relative;
	z-index: 1;
}
#flash {
	position: absolute;
	z-index:0;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

z-indexでレイヤーを指定して使う。
古いブラウザによっては正常に見えない可能性もあるが、
IE6より前のブラウザとかは、無視したいところ。。。