flashの上にhtmlを重ねる
意外と簡単です。
ってか通常（sslじゃない方）のmixiのログイン画面ってそうなってますね。
そして、今やマインディアのトップページもそうなっています。
flash側
とりあえずflashのwmodeがデフォルト値だと、z-indexが無視されて最前面をキープしてしまうらしいです。
なので、flashのwmodeをopaqueかtransparentに設定してやるんだそうで。
まぁ、実際にソースを見ながらやってみましょう。
下はマインディアのトップページのソースから抜粋したものですが・・・。
>|java|
<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を入れてやります。
>|css|
#flash_containar {
z-index:1;
}
||<
そんで、flashの上に重ねる部分、そうですね
<div id="hoge">
とかにも、z-indexを指定してやります。
ただし、poisitionもabsoluteで指定してやらないと、位置的にかさねられないですので、それもしてやろうかと。
>|css|
#hoge {
z-index:2;
/*別にflash_containarのz-indexより高ければOKです*/
position:absolute;
top:50px;
left:50px;
}
||<
こんな感じかしら。
数値は適当です。
divの背景を透過gifとかにしても透けますよ。
透過pngとかでも。