フルFlashのサイトにHTMLフッターをつけてみる

フルFlashのサイトに対して、HTMLフッターをつけたいという要望があったので、つけてみることにした。 Flashの埋め込み方は、swfobject.js(versionは1.5)を使って埋めてみた。

<div id="content"><!-- ここにFlashがロードされます --></div>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
// <![CDATA[

var so = new SWFObject('swf/sample.swf', 'website', '100%', '100%', '9', '#ffffff');
so.useExpressInstall('swf/expressinstall.swf');
so.write('content');

// ]]>
</script>

これでFlashがフルサイズで読み込まれる。

さて、今回はこれに対して、Flashの下に20pxばかりのHTMLでつくったフッターを埋め込みたい。 実装内容は下記の通り。

Flashを表示するエレメントの親要素に、全体レイアウトを設定する<div id=“wrapper”>を追加。この要素が実際にリサイズすることになる。 ウィンドウのサイズを取得して、それから20px引き、下部にHTML部分がピタっと出現するつくりにする。 フッターは、常にウィンドウ下部に固定することにする。

<div id="wrapper">
<div id="content"><!-- ここにFlashがロードされます --></div>
</div>
<div id="footer">HTMLフッター部分</div>
<style type="text/css">
body {
    position: relative;
}
#footer {
    width: 100%;
    height: 20px;
    background: #000;
    position: absolute;
    left: 0;
    bottom: 0;
    color: #fff;
}
</style>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
var so = new SWFObject('swf/sample.swf', 'website', '100%', '100%', '9', '#ffffff');
so.useExpressInstall('swf/expressinstall.swf');
so.write('content');
(function(){
    var resizeTo = function(e){
        var winHeight = document.all ? (document.body.clientHeight - 20) : (window.innerHeight - 20);
        var wrapper = document.getElementById(e);
        wrapper.style.width = '100%';
        wrapper.style.height = winHeight + 'px';
    }
    window.onload = function(){
        resizeTo('wrapper');
    }
    window.onresize = function(){
        resizeTo('wrapper');
    }
})();
</script>

これでHTML要素のフッターを下部に維持しつつ、フルFlashを実現できる。 ってか、20pxあいてる時点でフルFlashじゃないじゃん!とかいう突っ込みはやめて~w