S 0134fcf4b36809e06b94dc4001167cad flashの上にhtmlを重ねる

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

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

http://mindia.jp/top

flash側


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

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

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

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

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


ここ。

'wmode','transparent'

とここ！



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

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

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

html


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

たとえば、flashを



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

#flash_containar {
z-index:1;
}

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



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

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

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

divの背景を透過gifとかにしても透けますよ。
透過pngとかでも。
コメントするにはログインが必要です

もしかして

    他の人の「flashの上にhtmlを重ねる」

    S 0134fcf4b36809e06b94dc4001167cad

    (480words)

    最新

      最新エントリ

        関連ツイート