完全なフルFlashのサイトではなくて、一部だけHTMLを組み込むということがあります。今回はフルFlashのサイトに固定したHTMLのフッターを付け加える方法を紹介します。
1．HTMLにswfファイルを簡単に埋め込むことができるSWFObjectとウィンドウを指定したサイズよりも小さくした場合にスクロールバーを表示するようにするためにSWFForceSizeを使います。<head>内に下記を追加します。
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swfforcesize.js"></script>
2．<body>内に下記を追加します。
<div id="flashcontent"></div>
<script type="text/javascript">var so = new SWFObject("xxx.swf", "xxx", "100%", "100%", "8", "#ffcccc");
so.addParam("wmode", "transparent");
so.addParam("menu", "false");
so.addParam("scale", "noscale");
if(so.write("flashcontent")){
var forcesize = new SWFForceSize(so, 900, 700);
}
</script>
<div id="footer_wrap">
<div id="footer"></div>
</div>
今回はSWFObject1.5を使っているので、上記のような書き方になっています。「var forcesize = new SWFForceSize(so, 900, 700);」の部分は幅900pxで高さ700pxの領域は最低限表示するという指定をしていて、もしこの指定したサイズよりもウィンドウを小さくした場合はスクロールバーが表示されるようになっています。
3．下記のようにCSSを記述します。
html, body, #flashcontent {
height: 100%;
}
body > #flashcontent {
min-width: 900px;
width: 100%;
min-height: 700px;
height: 100%;
background: #ffcccc;
}#footer_wrap {
width: 100%;
height: 105px;
margin: -105px 0 0;
position: absolute;
left: 0;
background: #ccffcc;
}#footer {
width: 900px;
height: 105px;
margin: 0 auto;
background: #ccffcc;
}
幅100%で高さ100%のフルFlashなので、#footer_wrapにmargin:-105pxを指定してHTMLのフッターを持ち上げるというのがポイントです。
leave a comment