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

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

最終更新日:

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

コーディング・WordPress化作業を代行します

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。

コーディング・WordPress化作業を代行します

JavaScriptのおすすめ参考書

楽天ブックス
¥2,838 (2024/06/07 12:15時点 | 楽天市場調べ)

TAGS

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