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="http://antonsan.net/wp/wp-content/uploads/20120305_swfsample.swf">
<param name=loop value=true>
<param name=quality value=high>
<param name=bgcolor value=#000>
<embed src="http://antonsan.net/wp/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="http://antonsan.net/wp/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="http://antonsan.net/wp/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


This entry was posted in WordPress and tagged , , , , , . Bookmark the permalink.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です