Tech Racho エンジニアの「?」を「!」に。
  • 開発

Flashより前面にHTML要素を重ねて配置する方法

Flashにhtml要素を重ねてみたいと思ったことはありませんか?

今回、Flashの上にhtml要素を重ねる必要のある部分を作成することになったので試行錯誤してみました。
要素の表示順を指定できるz-indexを指定すればよさそうだと思いやってみましたが、結果Flashが上になってしまいダメでした。

いろいろ調べた結果、objectタグとembedタグを使ってFlash表示しているかたは
objectタグで囲まれた部分にを追加し、
embedタグにもwmode="transparent"を指定してやれば動きます。

他の記事を拝見するとhtml要素にz-indexを指定しなければうまく表示されないようなことも書いてありましたが、
私の場合は特にz-indexを指定しなくても上記だけで正常に表示されました。

下記に、サンプルを載せます。

<object id="flash" 
  width="100%" 
  height="420" 
  classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" 
  bgcolor="#ffffff">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="quality" value="high" />
  <param name="wmode" value="transparent" />
  <param name="src" value="flash/main.swf" />
  <param name="flashvars" value="cookieflg=false" />
  <param name="pluginspage" value="http://www.macromedia.com/go/getflashplayer" />
  <embed
    id="flash"
    width="100%"
    height="420" 
    type="application/x-shockwave-flash" 
    src="flash/main.swf" 
    allowScriptAccess="sameDomain" 
    quality="high" 
    wmode="transparent" 
    flashvars="cookieflg=false" 
    pluginspage="http://www.macromedia.com/go/getflashplayer"
    bgcolor="#ffffff" />
</object>

CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。