Flash上にプルダウンメニューを重ねる

swf上にHTML要素をレイヤー表示する際の解決策

少し前に「JavaScriptでプルダウンメニュー（DropDownMenu.js）」という記事をこのブログで紹介してみたトコロ、結構なアクセスがあったので、気をよくしての第２弾です。

この前かかわった仕事で、JavaScriptのプルダウンメニューの下にFlashコンテンツを表示したいというページがあった。いろいろと試してみるとFirefoxなどでは、Flash上で画面が書き変わってしまうと、最上位面に表示されてしまい、その時にプルダウンメニューが表示されているとFlashの下に隠れてしまうコトが分かった。

何とかならないかと思っていたのだが、解決作が見つからず、そのページはFlashを使わない事にしてもらった。…しかし、開発の人間としては何か解決策がないだろうかと、その仕事が終わった後もいろいろ本を眺めていた。

するとやっぱりあるんですね。Ｗeb creatorsの10月号に載ってました。
<object>〜</object>の中に、
<param name="wmode" value="transparent">
というパラメータを追加して、
Flash要素より、HTML要素（今の場合はプルダウンメニュー）のz-index設定の数値を大きくしてやるコトで実現できるようである。

サンプルはこちら

↑このサンプルはこちらからダウンロードできます。

ただし、いくつか不具合もあるようです。Web creatorsの11月号にiframeを使う方法が載っていますが、プルダウンメニューなどを重ねる場合は今回紹介した方法でＯＫだと思います。
また、僕の場合、Flashの組込にはswfobject.jsというJavaScriptをつかっています。その場合には、所定の位置に
so.addParam("wmode", "transparent");
と記述して同様にパラメータを追加してやればＯＫです。

なお、Operaではうまく表示されないので、ご注意ください。