新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

Flashの上にHTMLオブジェクトを配置する方法

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

デザイナーからちょっとした注文が入ったので久しぶりにFlashをいじってみた。
Flashのコンテンツの上にHTMLのボタンを配置したいらしい。

Flashの上にHTML失敗
何も設定しないとこういった形でFlashが上に出てしまう。

スポンサーリンク
 

これは実は簡単で、Flashを透明にして、あとはCSSのz-indexで上下関係を設定してあげれば良い。
Flashの上にJavaScript(JQuery)で作られたプルダウンメニューを配置する際に頻繁に利用していた。

具体的には

  1. 上に乗せたいHTMLのオブジェクトにCSSで「z-index:1」と設定する。
  2. Flashのパラメータ「wmode」を「transparent(透明)」に設定する。

といった流れ。

HTMLオブジェクトに「z-index:1」を設定するのは簡単だと思うので端折ります。
問題はFlashのパラメータ「wmode」を「transparent(透明)」に設定する方法。

Dreamweaver(ドリームウィーバー)をお持ちの方は該当のFlashを選んで以下のように設定すればOK。
DreamweaverでのFlashのパラメータ設定

ただ、最近はFlashを使うときはswfobject使うことが多い。
swfobjectを使った上での設定は以下のように直接Javascriptを修正すればOK。

<script type=”text/javascript”>
<!–
var so = new SWFObject(“images/top.swf”, “できない。わからない。プロットファクトリーが解決します。”, “700”, “230”, “7”, “#ffffff”);
so.write(“flashcontents”);
 // –>
</script>

<script type=”text/javascript”>
<!–
var so = new SWFObject(“images/top.swf”, “できない。わからない。プロットファクトリーが解決します。”, “700”, “230”, “7”, “#ffffff”);
so.addParam(“wmode”, “transparent”);
so.write(“flashcontents”);
 // –>
</script>

太字の部分を追加してあげれば良いということになる。

なお、通常のFlashの場合でもソースレベルで修正は当然可能。
念のため、そのソースも引用させて頂きます。
(上記、Dreamweaverを使ってやる方法で生成されるソースとなります。)

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0″ width=”700″ height=”230″ title=”パソコン教室”>
        <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>

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0″ width=”700″ height=”230″ title=”パソコン教室”>
        <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の上にHTMLのオブジェクトを乗せるなんてことしなくても、Flash内にすべて入れ込んじゃえばいいと考える人もいる筈。
ただ、SEOを考えた場合はそうしないほうがいい場合もあるんですよねぇ。

 - FLASH, 覚え書き

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

Illustrator(イラストレータ)のピクセルにスナップ(ピクセルグリッドに整合)を解除する方法 【DTP】

1年以上前の記事です。内容が古い可能性があります。以前、Illustrator( …

no image
USTREAM(ユーストリーム)生配信における反省点

1年以上前の記事です。内容が古い可能性があります。先日も触れましたが今年のうちわ …

カーナビの地図更新サービスの無料期間が終わりそうなので地図データをアップデートしてみた(データ更新編)

1年以上前の記事です。内容が古い可能性があります。1. ID取得編 | …

天気系ツイートは注意!あなたの自宅が特定される【ツイッター】

1年以上前の記事です。内容が古い可能性があります。まあ、そうなんだろうけどそこま …

債権回収詐欺(ヤミ金詐欺)に対する会社として取るべき対策

1年以上前の記事です。内容が古い可能性があります。ほんと、自分がやらかしたことじ …

Appleの「Retina(レチナ)ディスプレイ」とはなんなのか?

1年以上前の記事です。内容が古い可能性があります。Appleの新商品発表会「WW …

侮れない! P検3級への道 【液晶ディスプレイ編】

1年以上前の記事です。内容が古い可能性があります。週末に行なっているパソコン教室 …

電源ボタンが壊れたiPhoneを電源ボタンを使わず再起動させる方法

1年以上前の記事です。内容が古い可能性があります。娘の「iPhone5」の電源ボ …

Yahoo! ジオプラスからのドメイン移管

1年以上前の記事です。内容が古い可能性があります。Yahoo!ジオプラスの無料ド …

猫に与えちゃ(食べさせては)いけないもの【ペロ追悼企画】

1年以上前の記事です。内容が古い可能性があります。先日、一番最初に飼い始めたうち …

血液型オヤジ