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>