2 月 13 2009

CSSのz-indexを使ってFlashを背景表示する例

Posted by tanjo at 3:36 PM

CSSのz-indexを使ってFlashを背景表示する…ときの注意点とか、やってみて気づいたこと。

zindex

使ってみた例というのは、こないだ作ったサイトです。
» 多摩美術大学 グラフィックデザイン学科 卒業制作展 2009 [WOW]

やりかた

この方法、たぶん「HTMLのプルダウンメニューがFlash領域にかぶってしまうとき」なんかには割とよく使われるのでしょうか？私の例では、「HTMLページの背景余白にでっかいFlashを表示する」とかいう妙な使い方だけど。

HTML↓↓

<div id="content">
  <!-- ここにHTMLのページコンテンツ -->
  ほげほげ
</div>
<div id="flash">
  <!-- ここにFlashを（不）透明表示設定で挿入する。 -->
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
    <param name="movie" value="main.swf" />
    <param name="wmode" value="transparent" />
    <embed src="main.swf" wmode="transparent" type="application/x-shockwave-flash" />
  </object>
</div>

CSS↓↓

#content {
	position: relative;    /*通常どおりの位置に配置*/
	z-index: 1;
}
#flash {
	position: absolute;    /*#contentの後ろ側にW100%, H500pxで配置*/
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px;
}

とまあ、ソースはこんな感じです。z-index はブロックレベル要素の描画レイヤーの上下を設定できるプロパティです。（数字が大きいほど手前になる。）
注意点としては、

  • レイヤー関係を反映させるには、通常どおりの位置に表示させたい要素も、position: relative; と指定する。無指定（position: static）のままではダメ。
  • Flashを挿入するとき、<param>タグや表示用のJavaScriptで、wmode を transparent（または opaque）と設定すること。

この２つを満たさないと、奥にあるはずのFlashが手前に表示されてしまったりするようです。

マウスフォーカス

さて、ここまではトラブルなくできたんですが、今回の私の例だと、「実は背景Flash領域もクリッカブル。マウスのフォーカスってどうなるんだ？」という疑問がありました。
結論から書くと、「細かいところは環境依存」ぽいです。

HTML部分の方が手前にあるので、テキストの選択やリンクは問題なく動作しました。でも、行間でのクリックとか、右クリックのコンテキストメニュー（HTMLメニューかFlashメニューか）は、ブラウザと、それとOSによっても異なるみたいです。
一応上側に来るブロックレベル要素に背景色や背景画像をしてやると、Flashのクリック判定はなくなるようですが、Macだと右クリックはFlashメニューが表示されたりと、けっこういろいろ。

ま、マウス判定はちょっと微妙なところがありましたが、表示上は綺麗にレイヤー化してくれたので、HTMLテキストや透過GIFの後ろ側に動くFlashが表示されるというのはなんか新鮮で面白かったです。

誤動作？

確認済みの誤動作について。やっぱり妙な表現はあんまりするモンじゃありませんかね(^^;

  • IE6 だとFlash用のブロックレベル要素が表示されない。でもこれはz-index関連のトラブルではなくて、position: absolute; に対する IE6 独自のバグっぽい。詳しいことは調査中。
    » 解決しました。
  • Mac OSX 10.4 Firefox 3.0 にて、HTMLのリンクにカーソルを乗せると、一瞬だけFlashが上に描画されて画面がちらつくという報告が。10.4 Safari や 10.5 Firefox 3 では確認できず。？？
  • とっても古いSafari（1.2とか）はz-index自体を解釈しないみたい。

技術ネタ | , ,
Trackback URI : http://phenotype.jpn.org/blog/archives/1323/trackback

Leave a Reply