KH-WEBLOG TOP > WEBメモ > JavaScript > ドロップダウンメニュー等を配置した時にFLASHの上に表示させる

ドロップダウンメニュー等を配置した時にFLASHの上に表示させる

最終更新日:

ヘッダーナビゲーションのすぐ下にFLASHを配置した場合、
ナビゲーションにJavascriptのドロップダウンメニュー等を使用していると
ドロップダウンメニューがFLASHの背面に隠れてしまいます。
その時の対処法をメモ。

Dreamweaver等でFLASHを入れ込み使用している場合

<object>~</object>タグの中に

<param name="wmode" value="transparent" />

を追加。

<embed>タグ内に

wmode="transparent"

と属性追加。

AC_FL_RunContent()内に

, 'wmode', 'transparent'

を追加等をして、

あとはドロップダウンメニュー部分のCSSのz-indexを100等(値はFLASHコンテンツより大きければ何でもいい)の値にすればOK

上記の方法でjavascriptのドロップダウンメニューがFLASHより前面にきます。

swfobject.jsでFLASHを使用している場合

swfobject.jsでFlashを使用している場合は、上記の方法ではなく、

<script type="text/javascript">	
var flashVars = {}  

var parms = {  
    wmode :"transparent"  
}    
  swfobject.embedSWF(
    "swf/top.swf", //swfファイルへのパス
    "noFlash",//代替コンテンツを表示するオブジェクトのid
    "950",//表示されるswfの幅
    "290",//表示されるswfの高さ
    "9.0.0",//flashPlayerのバージョン
	"#ffffff",//背景色(特に指定がなければ""でOK)
	flashVars,
	parms
  );
</script>

のように、

var flashVars = {}  

var parms = {  
    wmode :"transparent"  
} 

の指定を追加し、これをそれぞれ
swfobject.embedSWF()の第7、第8引数に指定します。

あとは同じくCSSでz-indexの指定を調整すればOK。

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パーマリンク ビジュアルエディタ フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事