Firefox の Flash と overflow:hidden

  Flash のコンテンツのトラブルで解った事



1) wmode="transparent" で IE はポップアップブロックにひっかかる
2) Firefox は、div 内に Flash 置いて、div の overflow:hidden を指定しても Flash がうまく隠れない

事情は以下。

◎ Flash のコンテンツを maglog( ブログ ) に貼ろうとしたら、編集時に属性が消えている

◎ そこで、IFRAME にして埋め込む事に

◎ Flash の下に画像を置いて( メールアドレス )みるが、通常の配置だと Flash 側が下に空白がありすぎる

◎ そこで、画像側を position:absolute で絶対位置指定して重ねてみる。

◎ ところが、z-index が動作せず、常に Flash が手前になる

◎ wmode="transparent" を Flash 側に指定して画像が手前に出る

◎ IE のポップアップブロックにひっかかる

◎ wmode="transparent" を削除して、div で Flash のサイズを切り取るように表示する

◎ どういうわけか、Firefox だけ Flash が手前( ええかげんにしてほしい )

◎ 仕方なく JavaScript で ブラウザチェックして、document.write する


で、完成したコードが以下のようになります


  
<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>
</HEAD>
<BODY style='margin:0'>

<SCRIPT language="javascript" type="text/javascript">
str="";
str+="<img \n";
str+="src=\"http://winofsql.jp/image/mail.png\" \n";
str+="border=\"0\" \n";
str+="galleryimg=\"no\" \n";
str+="style='position:absolute;top:180px;left:0px;' \n";
str+="> \n";
str+="<div \n";
str+="style='height:182;overflow:hidden;overflow-y:hidden' \n";
str+="> \n";
str+="<embed \n";
str+="src=\"http://pipa.jp/tegaki/OBlogParts.swf\" \n";
str+="width=\"150\" \n";
str+="height=\"210\" \n";
str+="type=\"application/x-shockwave-flash\" \n";
str+="FlashVars=\"ID=61811\" ";

if (window.navigator.userAgent.toLowerCase().indexOf("firefox") > -1) {
	str+="wmode=\"transparent\"  ";
}
str+="></embed></div> ";
document.write(str);
</SCRIPT>

</body>
</html>
  


この手の HTML 定義の文字列化は、手作業でやると時間がいくらあっても足りないし、
メンテナンス性も悪いので、ウチにある以下のページの 「JavaScript」 ボタンを使います。

テキスト変換サービス

表示されている HTML が再び欲しい場合は、そのページを表示してアドレスバーに以下を入力します
( メッセージボックス出たら CTRL+C で、クリップボードにコピー)
※ ↑CTRL+C は IE のみ

  
javascript:alert(document.body.innerHTML)
  












   SQLの窓    create:2008/12/17  update:2014/09/07   管理者用(要ログイン)





フリーフォントWEBサービス

SQLの窓WEBサービス

SQLの窓フリーソフト

写真素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ