- 2008.10.11 Sat 13:20
css | flash : z-indexを有効にしてFlashの上にプルダウンメニューを表示する
今まで知らなかったのですが、Flashなどを貼り付ける際に使うobjectタグやembedタグには通常状態だとz-indexが効かないようです。
そのため、JavaScript+CSSで表示させているプルダウンメニューがFlashの下にもぐりこんでしまいました。プルダウンメニューはユーザビリティ的にあまりよろしくなさそうなので個人的にはあまり使いたくないもののひとつなのですが、今はそれはさておき。
これを解決するにはobject,embedタグを使うときに一手間かける必要があります。
<object classid="@@" codebase="@@" width="@@" height="@@ id="@@" align="@@"›
<param name="allowScriptAccess" value="sameDomain" /›
<param name="wmode" value="transparent" /›
<param name="movie" value="@@.swf" /›<param name="quality" value="high" /›<param name="bgcolor" value="#ffffff" /›<embed src="@@.swf" quality="high" bgcolor="#ffffff" width="@@" height="@@" name="@@" align="@@" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="@@" wmode="transparent"/›
</embed›</object›
<param name="allowScriptAccess" value="sameDomain" /›
<param name="wmode" value="transparent" /›
<param name="movie" value="@@.swf" /›<param name="quality" value="high" /›<param name="bgcolor" value="#ffffff" /›<embed src="@@.swf" quality="high" bgcolor="#ffffff" width="@@" height="@@" name="@@" align="@@" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="@@" wmode="transparent"/›
</embed›</object›
上記の太字で示した部分を追加することで、z-indexが有効になります。
- Newer: リニューアルしました。
- Older: jQueryやmootoolsなど、２つのJavaScriptライブラリを共存させる
Comments:2
- 753 2008.10.12 Sun 0:02
-
FLASH製のブログパーツがあるページでLightwindow使ったりする時のFLASHかぶりを防ぐ方法としても使えますよね!!
自分の周りではLightWindow ＋ FLASHでスライドショーっぽい使い方をする人が多いので、よく使いますよ！ - sugawa 2008.10.14 Tue 21:05
-
753さんこんにちは。
Flashはまだまだ触り始めたばかりなので、分からないことだらけです。
役立つ情報、ありがとうございます。またいろいろ教えてくださいね。
Trackbacks:0
- Trackback URL for this entry
- http://haruka.sugawa.in/note/css/43/trackback
- Listed below are links to weblogs that reference
- z-indexを有効にしてFlashの上にプルダウンメニューを表示する from haruka.sugawa