« Webでの適正な文字の指定って? | トップページ | Webサイトのインターフェイス »

2007.10.12

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

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

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

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

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

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

サンプルはこちら

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

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

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

|

« Webでの適正な文字の指定って? | トップページ | Webサイトのインターフェイス »

コメント

こんにちは。
今、movable typeでサイト作成中です。トップページで、swfobject.jsでflash表示と、ドロップダウンメニューの重なりで苦労しています。
教えてほしいことが3点あります。
1 〜の中に、

というパラメータを追加とは、どこに記述するのでしょうか?

2 Flash要素より、HTML要素(今の場合はプルダウンメニュー)のz-index設定の数値を大きくやるとは、DropDownMenu.cssに追加するということですか?

3 swfobject.jsを使っている場合は所定の位置にso.addParam("wmode", "transparent");
と記述して同様にパラメータを追加してやればOKとは、どこに追加するのでしょうか?また、この場合1,2の処理は必要ないのでしょうか?

よくわからないことだらけなので、教えていただけると助かります。

投稿: nb | 2008.09.09 12:27

nbさん、コメントありがとうございます。

1について)
swfobject.jsを使われているのでしたら、
htmlにobject要素を記述する必要がありません。(それはお分かりですよね?そのためのswfobject.jsです)
なので、サンプルのhtmlの62行目のように
so.addParam("wmode", "transparent");
と追加して下さい。


2について)
DropDownMenu.jsを使ってプルダウンメニュー(ドロップダウンメニュー)をお作りでしょうか?
それならば、z-index設定をしなくても大丈夫です。
元々、DropDownMenu.cssでは、サブメニューのz-indexが3となっており、他の要素より優先が高くなるようになっています。
z-index設定は、普通のhtml要素をFlashコンテンツ上に重ねる場合に必要です。


3について)
前述しましたが、サンプルのhtmlの62行目のように
so.addParam("wmode", "transparent");
と追加して下さい。
※html内のswfを読み込むスクリプト部分に上記のパラメータを追加するという意味になります。クオリティに関するパラメータが記述されていますので、その下にでも記述するのが良いでしょう。


以上、サンプルの仕掛けどおりに作れば、同じようにできるハズなんですが…。
サンプルのファイルをよく見ていただいて、必要ならば、Web creators2007年10月号を購入していただきたいと思います。

投稿: exyz | 2008.09.09 14:22

こんばんは。delicious
うまくできました~。大変ありがとうございました。今後ともよろしくです。

投稿: nb | 2008.09.09 20:22

nbさん、コメントありがとうございます。

うまくできたようで良かったです。
ご報告、ありがとうございました。

投稿: exyz | 2008.09.09 21:30

↑このサンプルはこちらからダウンロードできます。
こちらのサンプルがダウンロードできなくなってしまっていて困っています^^;
どうかよろしくお願いしますm(_ _)m

投稿: g!x | 2008.09.25 19:27

g!xさん、コメントありがとうございます。

ファイルを置いてある、www.adrive.comがメンテナンス中です。
「This file is currently unavailable due to maintenance. Please try again later. 」
というメッセージが出ていませんか?

申し訳ありませんが、しばらくしてからもう一度試して下さい。

投稿: exyz | 2008.09.25 21:22

ちょうどこのようなことがやりたく、
かなりググってきました。

なるほど。
参考になりました。
早速テストします!

またお邪魔します!

投稿: プレーゴ(名古屋でホームページ制作してます) | 2009.02.23 13:58

プレーゴさん、コメントありがとうございます。

いろいろと使えそうなモノを載せていきますので、またよろしくお願いします。

投稿: exyz | 2009.02.23 22:50

flashが前面に来て困っています。調べていたらここにたどり着きました。

サンプルがダウンロードできない(ページ自体が存在しない)のですが、参考にしたいのでメールで頂くことはできますでしょうか?

投稿: hk | 2010.09.28 12:08

hkさん、コメントありがとうございます。

データのダウンロードはできると思いますので、もう一度試してみてください。
よろしくお願いします。

投稿: exyz | 2010.09.28 12:32

すいません。なぜか会社PCからでは出来ませんでしたが、自宅でダウンロードできました。参考にさせていただきます。

投稿: hk | 2010.09.28 22:18

Safariで確認したときは問題なかったのに、IEでは上手く表示されなかったので、悩んでいましたが、この記事で問題解決しました!
ありがとうございました☆

投稿: mao | 2012.02.06 16:20

maoさん、コメントありがとうございます。
お役に立てたようで良かったです!

投稿: exyz | 2012.02.06 22:05

フラッシュにプルダウンメニューで検索して、こちらの記事に出会いました。
やってみたいこととピッタシなんですが、サンプルをダウンロードできません。
もう引き揚げられちゃったんでしょうか?
教えていただけると幸いなんですが・・・よろしくお願いします。

投稿: たんぽぽ234 | 2012.07.27 10:51

たんぽぽ234さん、申し訳ございません。
リンクが切れておりました。
リンクを貼り直しましたので、ダウンロードして下さい。
ご連絡ありがとうございました。

※かなり前の記事ですので、僕自身このテクニックはもう使用しておりません。現在のWeb環境では、ご希望通りにならない可能性もあるかと思いますが、了承してお使い下さい。

投稿: exyz | 2012.07.27 11:21

ありがとうございました。
日進月歩なんですねぇ(^^ゞ

投稿: たんぽぽ234 | 2012.07.27 22:13

こちらのサンプルのおかげで、flashの上にナビゲーションが表示されました。
ありがとうございました(◎´∀`)ノ

投稿: tuna | 2013.04.09 11:18

tunaさん、コメントありがとうございます。
お役に立てたようで良かったです!

古い記事ですので、swfobject.jsのバージョンによっては、下記のブログのように適宜変更が必要な場合もあります。ご注意下さい。
http://wordpress.k-stone.net/articles/flash/93.html

投稿: exyz | 2013.04.09 17:19

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/16729870

この記事へのトラックバック一覧です: Flash上にプルダウンメニューを重ねる:

» JavaScriptでプルダウンメニュー [Good Sleep]
ドロップダウンメニュー|DropDownMenu.js プルダウンメニュー化する方法もいろいろあるみたいですが、今回紹介させてもらうのは、JavaScript Ajax 実践サンプル集さんのドロッ [続きを読む]

受信: 2007.10.13 12:03

« Webでの適正な文字の指定って? | トップページ | Webサイトのインターフェイス »