Flash コンテンツが z-index を無視して覆い被さってしまう件

えー恥ずかしながら・・・Flash について全くの素人で全然詳しくありません。

最近 Amazon から来ていたメールでお買い得ウィジェットってのを知って、面白そうなので使っていたんですけど、どうも z-index を無視して一番上に表示されてしまいます。Lightbox での画像拡大と非常に相性が悪いです。

こうなっちゃいます。

拡大表示したい画像の上に Flash が永遠とぐるぐる表示されています。こりゃ堪らんわい。Flash と z-index の関係については過去にさんざん既出なので同じような解決方法は山ほど見つかると思いますけど、自分的メモとしてエントリしました。

Flash コンテンツで z-index を有効にする方法

Flash に wmode ってパラメータがあります。このパラメータで Flash の背景を透明化または不透明化の設定が可能です。この透明化の機能を利用することで Flash コンテンツが z-index を無視して一番上に表示されてしまう不具合を解消することができます。

具体的には、Flash コンテンツの呼び出し部分の html ソースを以下のように赤文字部分を追記変更します。

<object>
<param  name="…"  value="…"  />
<param  name="…"  value="…"  />
<param  name="wmode"  value="transparent">
<embed  src="…"  wmode="transparent"  />
</object>

Amazon のお買い得ウィジェットを例にしてみます。

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab" id="Player_9075a896-039c-470e-bcaf-1d977db5f21c"  WIDTH="250px" HEIGHT="250px">
<PARAM NAME="movie" VALUE="http://ws.amazon.co.jp/widgets/q?ServiceVersion=20070822&MarketPlace=JP&ID=V20070822%2FJP%2Fdrk7jp-22%2F8009%2F9075a896-039c-470e-bcaf-1d977db5f21c&Operation=GetDisplayTemplate">
<PARAM NAME="quality" VALUE="high">
<PARAM NAME="bgcolor" VALUE="#FFFFFF">
<PARAM NAME="allowscriptaccess" VALUE="always">
<param  name="wmode"  value="transparent">
<embed wmode="transparent" src="http://ws.amazon.co.jp/widgets/q?ServiceVersion=20070822&MarketPlace=JP&ID=V20070822%2FJP%2Fdrk7jp-22%2F8009%2F9075a896-039c-470e-bcaf-1d977db5f21c&Operation=GetDisplayTemplate" id="Player_9075a896-039c-470e-bcaf-1d977db5f21c" quality="high" bgcolor="#ffffff" name="Player_9075a896-039c-470e-bcaf-1d977db5f21c" allowscriptaccess="always"  type="application/x-shockwave-flash" align="middle" height="250px" width="250px">
</embed>
</OBJECT>
<NOSCRIPT>
<A HREF="http://ws.amazon.co.jp/widgets/q?ServiceVersion=20070822&MarketPlace=JP&ID=V20070822%2FJP%2Fdrk7jp-22%2F8009%2F9075a896-039c-470e-bcaf-1d977db5f21c&Operation=NoScript">
Amazon.co.jp ウィジェット</A>
</NOSCRIPT>

対策した Flash タグで表示を確認してみます。正常に Lightbox の下に表示されていることが確認できました。

もしも Flash コンテンツが Javascript 経由で出力されている場合はもう少し面倒です。
「小粋空間: Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す」　あたりを参考にしてみてください。

と書きつつ JavaScript 経由で Flash を出力している場合は、それなりに意味があるため JavaScript 経由になっている場合が多いため、コンテンツ供給元に対応をお願いするのも一つの手かと思います。

と言うわけで、僕もお世話になっております AMN さん Flash の出力に <param name="wmode" value="transparent"> を加えて頂けると嬉しいです。

なお、この wmode を使った場合は、IE6/7、Firefox3、Safari3、Opera9 といったメージャーバージョンで意図するように下に隠れるようになりました。

wmode を設定する副作用について

wmode ってのを調べていく過程でいろいろ得た情報についてまとめておきます。なんとも微妙なパラメータですね。

［228635］wmode を transparent に設定した際の注意点

問題

FLASHのFPSを正常に - 3ping.org

graffiti-blog: wmodeのクセ

う〜ん・・・Flash もなんだかいろいろと問題があるだねー。