※ ChatGPTを利用し、要約された質問です(原文:Flashの表示について)
Flashの表示に関する問題と解決策
このQ&Aのポイント
FlashをSWFオブジェクトで表示している際に、回線が遅い場合にFlashの表示領域の高さが正しく表示されず、レイアウトが崩れる問題が発生します。
この問題の原因は、Flashの読み込み前にCSSの高さが適用されないためです。
解決策としては、CSSに直接高さを指定することや、Flashの表示領域の高さを取得してからコンテンツを表示する方法などがあります。
FlashをSWFオブジェクトで表示しています。
回線が遅い場合、Flashが読み込まれる前に一瞬、Flashの表示領域の高さ(CSS)が反映されていない?のか、Flashの下に表示すべき領域がFlashの部分に表示されレイアウトが崩れます。
下記にFlashを表示させる部分に関係のあるHTMLとCSSを記載いたします。
---------- HTML ----------
・・・・・・・・・・・・・
<head>
<script type='text/javascript' src='js/jquery-1.2.6.min.js'></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
</head>
<body>
・・・・・・・・・・・・・
・・・・・・・・・・・・・
<div id="top">・・・・・</div>
<div id="flash"></div>
<script type="text/javascript">
var flashvars = null;
var params = { bgcolor: "#●●●"};
swfobject.embedSWF("movie.swf", "movie", "840", "250", "9.0.0","expressInstall.swf", flashvars, params);
</script>
<div id="buttom">・・・・</div>
---------- CSS ----------
#flash {
width: 840px;
height: 250px;
}
CSSの250pxが効いていないのかFlash領域の高さがない状態で、上のコンテンツ(div id="top">・・・・</div>)のすぐ下にコンテンツ(<div id="buttom">・・・・</div>)が表示されてしまいます。
解決策に関してどのようなことでも良いので教えてください。
よろしくお願いいたします。
お礼
ご回答いただきありがとうございます。 お礼が遅くなり申し訳ございません。 ご指摘いただいた方法を試してみました。 IE6,7ではうまくいきました。 ありがとうございます。 Firefox2以降では現象が続いているようです。 もう少し調べてみます。 ありがとうございます。