フルFlashのサイトにHTMLフッターをつけてみる
2009年10月2日
フルFlashのサイトに対して、HTMLフッターをつけたいという要望があったので、つけてみることにした。
Flashの埋め込み方は、swfobject.js(versionは1.5)を使って埋めてみた。
HTML:
これでFlashがフルサイズで読み込まれる。
さて、今回はこれに対して、Flashの下に20pxばかりのHTMLでつくったフッターを埋め込みたい。
実装内容は下記の通り。
Flashを表示するエレメントの親要素に、全体レイアウトを設定する<div id="wrapper">を追加。この要素が実際にリサイズすることになる。
ウィンドウのサイズを取得して、それから20px引き、下部にHTML部分がピタっと出現するつくりにする。
フッターは、常にウィンドウ下部に固定することにする。
HTML:
-
<div id="wrapper">
-
</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">
-
// <![CDATA[
-
-
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じゃないじゃん！とかいう突っ込みはやめて～ｗ
1.5ではコレでいいのですが
SWFObject 2.2の書き方でコレが出来る方法を模索中です。
当方まだまだ新米。
焦っております。
何か良い案がありましたらご教授ください。
コメント by haga — 2010年4月23日 @ 7:43 PM