HTML要素によるFlashブロックの詳細な例

コードをコピー

コードは次のとおりです。

wmode パラメータ:
透過モード: z-indexを使用して階層を制御できます
不透明モード: z-indexを使用して階層を制御できます
ウィンドウモード: Flash はブラウザーのコア表示ウィンドウの上にレイヤー化され、Flash はそれに重なる HTML をカバーします。

シナリオ 1 (フラッシュの Wmode パラメータを変更できる)
wmodeプロパティを透明または不透明に変更する

DEMO は次のとおりです。

コードをコピー

コードは次のとおりです。

<!doctypehtml>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>HTML 要素が Flash をブロックする - シナリオ 1</title>
<スタイル>
html、本文、オブジェクト、埋め込み{ パディング: 0; マージン: 0; }
.m-box { position: relative; }</p> <p> .m-flash、.m-flash 埋め込み { width: 400px; }
.m-shadow { 位置: absolute; 上: 0; 左: 0; 幅: 100px; 高さ: 100px; 背景色: #ccc; }
</スタイル>
</head>
<本文>

<div class="m-box">
<オブジェクトクラス="m-flash" クラスid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="src" value="<a href="http://www.aa.net/i/bookmark.swf">http://www.aa.net/i/bookmark.swf</a>">
<param name="wmode" value="透明"/>
<embed wmode="transparent" src="<a href="http://www.aa.net/i/bookmark.swf"></embed">http://www.aa.net/i/bookmark.swf"></embed</a>>
</オブジェクト></p> <p> <div class="m-shadow">
Jununxさん、ようこそ！ - 透明
</div>
</div></p> <p>
<div class="m-box">
<オブジェクトクラス="m-flash" クラスid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="src" value="<a href="http://www.aa.net/i/bookmark.swf">http://www.aa.net/i/bookmark.swf</a>">
<param name="wmode" value="不透明"/>
<embed wmode="opaque" src="<a href="http://www.aa.net/i/bookmark.swf"></embed">http://www.aa.net/i/bookmark.swf"></embed</a>>
</オブジェクト></p> <p> <div class="m-shadow">
Jununxさん、ようこそ！ --不透明
</div>
</div></p> <p></body>
</html>

シナリオ 2 (Flash wmode パラメータは変更できません) - Flash と iframe マスクが同じページにあります。注: Safari および Opera との互換性を確保したい場合は、このマスクは使用できないことを直接伝えてください。

DEMO は次のとおりです。

コードをコピー

コードは次のとおりです。

<!doctypehtml>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>HTML 要素が Flash をブロックする - シナリオ 2</title>
<スタイル>
html、本文、オブジェクト、埋め込み{ パディング: 0; マージン: 0; }
.m-box { position: relative; }</p> <p> .m-flash、.m-flash 埋め込み { width: 400px; }
.m-flash { 位置: 相対; z-index: 1; }
.m-shadow { 位置: absolute; 上: 0; 左: 0; z-index: 2; 幅: 100px; 高さ: 100px; 背景色: #ccc; }
.m-shadow-txt { 位置: 絶対; z-index: 2; }
.m-shadow-ifr { 位置: absolute; z-index: -1; 幅: 100%; 高さ: 100%; 不透明度: 0; フィルター: alpha(opacity=0); }
</スタイル>
</head>
<本文>

<div class="m-box">
<オブジェクトクラス="m-flash" クラスid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="src" value="<a href="http://www.aa.net/i/bookmark.swf">http://www.aa.net/i/bookmark.swf</a>">
<param name="wmode" value="window"/>
<embed wmode="window" src="<a href="http://www.aa.net/i/bookmark.swf"></embed">http://www.aa.net/i/bookmark.swf"></embed</a>>
</オブジェクト></p> <p> <div class="m-shadow">
<div class="m-shadow-txt">Jununxさん、ようこそ！ --ウィンドウ</div>
<iframe class="m-shadow-ifr" フレームボーダー="0"></iframe>
</div>
</div></p> <p></body>
</html>

シナリオ3（Flashのwmodeパラメータは変更できません） - iframeページによってFlashが導入されています。注：iframeページを操作する権限がない場合は、これをブロックできないことをリクエスト者に直接伝えてください。注：SafariとOperaとの互換性を保ちたい場合は、これをブロックできないことをリクエスト者に直接伝えてください。

デモページ:

コードをコピー

コードは次のとおりです。

<!doctypehtml>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>HTML 要素が Flash をブロックする - シナリオ 2</title>
<スタイル>
html、本文、オブジェクト、埋め込み{ パディング: 0; マージン: 0; }
.m-box { position: relative; }</p> <p> .m-flash { position: relative; 幅: 400px; 高さ: 400px; z-index: 1; }
.m-shadow { 位置: absolute; 上: 0; 左: 0; z-index: 2; 幅: 100px; 高さ: 100px; 背景色: #ccc; }
.m-shadow-txt { 位置: 絶対; z-index: 2; }
.m-shadow-ifr { 位置: absolute; z-index: -1; 幅: 100%; 高さ: 100%; 不透明度: 0; フィルター: alpha(opacity=0); }
</スタイル>
</head>
<本文>

<div class="m-box">
<iframe class="m-flash" src="ifr.html" frameborder="0"></iframe></p> <p> <div class="m-shadow">
<div class="m-shadow-txt">Jununxさん、ようこそ！ --ウィンドウ</div>
<iframe class="m-shadow-ifr" フレームボーダー="0"></iframe>
</div>
</div></p> <p></body>
</html>

Iframe ページ:

コードをコピー

コードは次のとおりです。

<!doctypehtml>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>HTML 要素が Flash をブロックする - シナリオ 3</title>
<スタイル>
html、本文、オブジェクト、埋め込み{ パディング: 0; マージン: 0; }
.ifr { 位置: absolute; z-index: 2; 幅: 100px; 高さ: 100px; 不透明度: 0; フィルター: alpha(opacity=0); }
.m-flash { 位置: 絶対; z-index: 1; 幅: 400px; }
</スタイル>
</head>
<本文>

<オブジェクトクラス="m-flash" クラスid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="src" value="<a href="http://www.aa.net/i/bookmark.swf">http://www.aa.net/i/bookmark.swf</a>">
<param name="wmode" value="window"/>
<embed wmode="window" src="<a href="http://www.aa.cn/i/bookmark.swf"></embed">http://www.aa.cn/i/bookmark.swf"></embed</a>>
</オブジェクト></p> <p><iframe class="ifr" frameborder="0"></iframe>
</本文>
</html>

<<: CSS テキスト強調を使用してテキストを強調するための実装コード

>>: ドラッグ可能で編集可能なガントチャートの詳細な説明（HighchartsはVueとReactで使用できます）