FLASHの上にHTML要素を被せる【Dreamweaver】

FLASH（SWFファイル）の上にHTML要素を重ねる方法を紹介します。
なお、SWFの挿入はDreamweaverから行ったという想定です。

まず、Dreamweaverのメニューから「挿入」＞「メディア」＞「Flash」を選び以下のようなソースを追加します。

<script type=”text/javascript”>

AC_FL_RunContent( ‘codebase’,'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0′,
‘width’,’600′,’height’,’600′,’title’,'●●●●●●’,'src’,'flash/flash’,'quality’,'high’,'pluginspage’,
‘http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash’,'movie’,'flash/flash’ ); //end AC code

</script><noscript><object classid=”clsid:●●●●●●●●●●●●●●” codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0″ width=”600″ height=”600″ title=”●●●●●●”>

<param name=”movie” value=”●●●●●●.swf” />

<param name=”quality” value=”high” />

<embed src=”●●●●●●.swf” quality=”high” pluginspage=”http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash” type=”application/x-shockwave-flash” width=”600″ height=”600″></embed>

</object>

</noscript>

これに以下の赤字部分を追加します。

<script type=”text/javascript”>

AC_FL_RunContent( ‘codebase’,'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0′,
‘width’,’600′,’height’,’600′,’title’,'●●●●●●’,'src’,'flash/flash’,'quality’,'high’,‘wmode’,'transparent’,’pluginspage’,
‘http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash’,'movie’,'flash/flash’ ); //end AC code

</script><noscript><object classid=”clsid:●●●●●●●●●●●●●●” codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0″ width=”600″ height=”600″ title=”●●●●●●”>

<param name=”movie” value=”●●●●●●.swf” />

<param name=”quality” value=”high” />

<param name=”wmode” value=”transparent”>

<embed src=”●●●●●●.swf” quality=”high” pluginspage=”http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash” type=”application/x-shockwave-flash” width=”600″ height=”600″></embed>

</object>

</noscript>

次に、このソース全体を<div id=”～～～”></div>で囲います。
このdivにはposition:relative;をかけておいてください。

さらに、このFLASHの上に重ねたいdiv要素を用意し（divじゃなくても基本は同じです）、position:absolute;をかけて、位置を調整しましょう。

最後に、FLASHを囲ったdivと上に重ねるdivの両方にz-indexを指定します。
上に重ねたいほうを大きい値となるように指定してくださいね。

とまぁ、以上で終了です。position周りは別にこの指定じゃなくても出来るんで、興味があったら色々いじってみてください。