Highslide 4 WordPress *reloaded* でポップアップされた画像がフラッシュオブジェクトの下に配置されてしまう

友人のサイトを作っていて、タイトルの問題が発生。
下の画像をクリックしてみれば分かるが、ポップアップされた画像がに、フラッシュオブジェクトの下に表示されてしまうではないか・・・。

■ 上記現象は以下のブラウザで発生した。

• Google chrome 17.0.963.56 m
• Internet Explorer 8

■ 次のブラウザではなぜか発生しなかった。

• Firefox 6.02
• Opera 11.61

ソースコード

フラッシュムービー用に書いたコードは次の通り。

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="500" height="400" id="swfsample" align="">
<param name=movie value="https://antonsan.net/vt/wp-content/uploads/20120305_swfsample.swf">
<param name=loop value=true>
<param name=quality value=high>
<param name=bgcolor value=#000>
<embed src="https://antonsan.net/vt/wp-content/uploads/20120305_swfsample.swf" loop=true quality=high bgcolor=#000 width="500" height="400" name="swfsample" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>

調べた結果、フラッシュムービーの背景を透明にすることで解決できるようだ。
以下の様に修正する。

• object 要素内に次の param 要素を追加する。
• embed 要素内に次の wmode 属性を追加する。
  wmode=”transparent”

修正後のソース。

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="500" height="400" id="fi1" align="">
<param name=movie value="https://antonsan.net/vt/wp-content/uploads/20120305_swfsample.swf">
<param name=loop value=true>
<param name=quality value=high>
<param name=bgcolor value=#000>
<param name="wmode" value="transparent" />
<embed src="https://antonsan.net/vt/wp-content/uploads/20120305_swfsample.swf" loop=true quality=high bgcolor=#000 width="500" height="400" name="fi1" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent">
</embed>
</object>

ソース修正後

ソース修正後のポップアップ画像の挙動。
フラッシュムービーの上に画像が表示されるようになりましたぁ。
めでたしめでたし。。。

ちなみに、ここで使用しているフラッシュはFlashしゃわーさんのサイトからダウンロードさせて頂きました、ありがとうございます。
葉っぱにマウスを乗せると成長します、おもしろい。。。(*^_^*)ww