flashの上にhtmlを重ねる

意外と簡単です。
ってか通常（sslじゃない方）のmixiのログイン画面ってそうなってますね。

そして、今やマインディアのトップページもそうなっています。

http://mindia.jp/top

flash側

とりあえずflashのwmodeがデフォルト値だと、z-indexが無視されて最前面をキープしてしまうらしいです。

なので、flashのwmodeをopaqueかtransparentに設定してやるんだそうで。

まぁ、実際にソースを見ながらやってみましょう。
下はマインディアのトップページのソースから抜粋したものですが・・・。

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','1000','height','414','src','Main','quality','high','wmode','transparent','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Main' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1000" height="414">
  <param name="movie" value="Main.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="transparent" / >
  <embed src="Main.swf" quality="high" wmode="transparent" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1000" height="414"></embed>
</object></noscript>

<script>～</script>の部分はDreamweaverでFlashを挿入すると出てくるソースですね。
そのままFlashを<object>で入れると、IEだと、Activeなんちゃらが「このコンテンツは・・・」はみたいなのが出るので、それをjavascriptで制御しています。

と、まぁ、がちゃがちゃした部分はほっといて。


ここ。

'wmode','transparent'

とここ！

<param name="wmode" value="transparent" / >

を挿入してやるとよいんですね～。

すると、flashの上にhtmlを重ねてやっても可視化されます。

ただ、html側も色々やってあげないとならないんですけどね^-^;

html

htmlではz-index（重なり)を指定してやります。

たとえば、flashを

<div id="flash_containar">

みたいなので、囲ってやり、下のようにcssを入れてやります。

#flash_containar {
z-index:1;
}

そんで、flashの上に重ねる部分、そうですね

<div id="hoge">

とかにも、z-indexを指定してやります。
ただし、poisitionもabsoluteで指定してやらないと、位置的にかさねられないですので、それもしてやろうかと。

#hoge {
z-index:2;
/*別にflash_containarのz-indexより高ければOKです*/
position:absolute;
top:50px;
left:50px;
}

こんな感じかしら。
数値は適当です。

divの背景を透過gifとかにしても透けますよ。
透過pngとかでも。