Flashの上にHTMLオブジェクトを配置する方法
1年以上前の記事です。内容が古い可能性があります。
デザイナーからちょっとした注文が入ったので久しぶりにFlashをいじってみた。
Flashのコンテンツの上にHTMLのボタンを配置したいらしい。
何も設定しないとこういった形でFlashが上に出てしまう。
これは実は簡単で、Flashを透明にして、あとはCSSのz-indexで上下関係を設定してあげれば良い。
Flashの上にJavaScript(JQuery)で作られたプルダウンメニューを配置する際に頻繁に利用していた。
具体的には
- 上に乗せたいHTMLのオブジェクトにCSSで「z-index:1」と設定する。
- Flashのパラメータ「wmode」を「transparent(透明)」に設定する。
といった流れ。
HTMLオブジェクトに「z-index:1」を設定するのは簡単だと思うので端折ります。
問題はFlashのパラメータ「wmode」を「transparent(透明)」に設定する方法。
Dreamweaver(ドリームウィーバー)をお持ちの方は該当のFlashを選んで以下のように設定すればOK。
ただ、最近はFlashを使うときはswfobject使うことが多い。
swfobjectを使った上での設定は以下のように直接Javascriptを修正すればOK。
<!–
var so = new SWFObject(“images/top.swf”, “できない。わからない。プロットファクトリーが解決します。”, “700”, “230”, “7”, “#ffffff”);
so.write(“flashcontents”);
// –>
</script>
↓
<!–
var so = new SWFObject(“images/top.swf”, “できない。わからない。プロットファクトリーが解決します。”, “700”, “230”, “7”, “#ffffff”);
so.addParam(“wmode”, “transparent”);
so.write(“flashcontents”);
// –>
</script>
太字の部分を追加してあげれば良いということになる。
なお、通常のFlashの場合でもソースレベルで修正は当然可能。
念のため、そのソースも引用させて頂きます。
(上記、Dreamweaverを使ってやる方法で生成されるソースとなります。)
<param name=”movie” value=”images/top.swf” />
<param name=”quality” value=”high” />
<embed src=”images/top.swf” quality=”high” pluginspage=”http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash” type=”application/x-shockwave-flash” width=”700″ height=”230″></embed>
</object>
↓
<param name=”movie” value=”images/top.swf” />
<param name=”quality” value=”high” />
<param name=”wmode” value=”transparent” />
<embed src=”images/top.swf” width=”700″ height=”230″ quality=”high” pluginspage=”http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash” type=”application/x-shockwave-flash” wmode=”transparent”></embed>
</object>
こちらも太字の部分を追加すれば良いということになる。
まとめると、
swfobjectを使った場合はJavaScript内に「so.addParam(“wmode”, “transparent”);」を記入。
objectタグを使った場合はparamタグ「<param name=”wmode” value=”transparent” />」を記入。
embedタグを使った場合はembetタグ内に属性「wmode=”transparent”」を記入。
と言った形になる。
で、うまくいくと以下のようにFlashの上にHTMLで書いたメニューが表示されるようになる。
まあ、無理にFlashの上にHTMLのオブジェクトを乗せるなんてことしなくても、Flash内にすべて入れ込んじゃえばいいと考える人もいる筈。
ただ、SEOを考えた場合はそうしないほうがいい場合もあるんですよねぇ。
アドセンス広告メイン
関連記事
-
学校(パソコン教室等)でFC2ホームページにアクセスできなくなった場合の対処法
1年以上前の記事です。内容が古い可能性があります。個人で行っているマンツーマンの …
-
スマホ(スマートフォン)を機種変した時のLINE(ライン)の移行手順と注意点【Android→iPhone編】
1年以上前の記事です。内容が古い可能性があります。スマホをiPhoneに変えた旨 …
-
ネットワークのトラフィック状況を確認するコマンド
1年以上前の記事です。内容が古い可能性があります。先日pingを紹介しましたがそ …
-
絶対儲かる?ペニーオークションとはなんなのか(2/2追記)
1年以上前の記事です。内容が古い可能性があります。さて、先日、グルーポンのビジネ …
-
WordPress3.4にアップデートしたらカスタムフィールドで入力した項目が表示されなくなった
1年以上前の記事です。内容が古い可能性があります。つい先日、WordPress( …
-
スマホサイト(スマートフォンサイト)のソース(HTML)を見る方法
1年以上前の記事です。内容が古い可能性があります。最近ではPCサイト並に重要視さ …
-
久しぶりのクレーマー登場!! (問題解決シート)
1年以上前の記事です。内容が古い可能性があります。いやぁ。疲れました。 久しぶり …
-
有料会員じゃないと見れないCOOKPAD(クックパッド)の人気順レシビをGoogleの検索結果で見る方法
1年以上前の記事です。内容が古い可能性があります。COOKPAD(クックパッド) …
-
「Aterm WM3600R」でインターネットに繋がりにくくなったときに確認したほうが良い設定
1年以上前の記事です。内容が古い可能性があります。この頃、モバイルWi-Fiルー …
-
NHK受信料は払うな。裁判でテレビがあっても契約書がなければ支払う必要はないとの結果
1年以上前の記事です。内容が古い可能性があります。テレビネタをもう一つ。 今度は …
- PREV
- 2日連続ネットで祭り、今度は「皆既月食」
- NEXT
- 「AKB48」全員Google+始める