初めまして。新人エンジニアの はる です。

社内では主にRuby on Rails と Flash をいじっています。

今回は、「透過に対応するシム技法」についてご紹介します。

Q：シム技法とは？

例えば、FlashをWEBページの上に重ねて表示(WEBページの１つ上のレイヤーに
Flashを表示するイメージ)する場合、IE6ではセレクトボックスが最前面に表示
されてしまいます。


HTMLのレイヤー構造を指定する方法としては、通常、CSSのz-indexプロパティを
使用しますが、IE6のSELECT要素にはz-indexを指定することが出来ません。
これはIE6において、SELECT要素がウィンドウコントロールとして扱われている
ために起こる現象です。


対策としては、iframe要素をSELECT要素の上に重ね、さらにiframeの上にFlashを
重ねることで、SELECT要素が最前面に表示されなくなります。
これを「シム技法」といいます。

さて、ここからが本題です。

シム技法を用いて背景が透明のFlashを表示したい場合を考えます。

iframeにはallowtransparency属性があり、

allowtransparency="true" ・・・背景を透過にする
allowtransparency="false" ・・・背景を透過にしない(初期値)

と定義されています。

しかし、背景を透過させるためにtrueを指定した場合、iframeの背景が透過されても

シムとして使用することができません。また、flaseを指定した場合は、シムとして

使用することはできるものの透過されません。

つまり、このままでは背景が透明のFlashをシム技法で表示することができない

ということになります。

これを解決するためには、iframeに少し珍しいstyle指定を行います。

<iframe frameborder="0" scrolling="no" style="filter:alpha(opacity=1);">

CSSのfilterプロパティはIE(Win)の独自プロパティであり、主に文字や画像を装飾

するために用いられます。上記のstyle指定では、不透明度を1％に指定することで

"ほぼ"透明のシムとして使用することができます。

filterプロパティは、IE独自の機能ですが、そもそもシム技法を使用しなければならない

ブラウザもIE6以下のみですので、IE6以外では表示しないよう切り分けることをお勧め

します。

また、FlashとFlashが重なるページの場合、Flashを表示しているobjectタグに、

以下の指定を行う必要があります。

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

上記の指定をしていない場合、FlashがHTMLのレイヤー構造を理解することが

できませんので、ご注意下さい。

以上、長文になりましたが「透過に対応するシム技法」についてご紹介させていただきました。

次回は「Ruby on Rails と Flash の連携方法」について触れてみたいと思います。