- ベストアンサー
html/cssでembedとz-indexについて
HTML・CSSで<DIV>を２つ使って片方にimgで画像を、もう一つに 文字を入れてz-indexで画像の上にレイヤーのような形で文字を 乗せることが出来ますが、画像の代わりにembedでflashファイル を使うとz-indexが効かないと思います。 flashファイル（画像）の上にレイヤーのように文字を乗せる方法 がありますでしょうか？ ご存知の方が居られたらご教示ください。 geohaseでXP、IE６の環境です、よろしくお願いします。
- geohase
- お礼率60% (3/5)
- その他([技術者向] コンピューター)
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
geohaseが何だかわからないけどまあいいや 【重要な注意】 1. この記述にはIEの独自拡張，およびCSS3の先行実装が含まれています 2. 適当なswfファイルを以下のソースコードと同じディレクトリに入れてください。 3. name値がwmodeであるparam要素はFirefox用には6.0以上の一部のバージョンでしかサポートされない 4. 1に関連するが，filterプロパティを使っているが，これはDirectXに依存するため，入っていないマシンでは動作しないかもしれない 5. 4に関連して。セキュリティ設定によっては動作しない可能性がある。 6. 検証はIE 7とMinefield(Firefox 3.0a6pre)でしか行っていない "p6"値をid属性に持つp要素上にFlashが再生され、また、そのp要素の内容として含まれる文字列「あいうえ」が左上に表示される。非常に見難いので目を凝らすこと。 ============ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>テスト</title> <style type="text/css"> html{ background-color:white; } body{ background-color:black; width:100%; } div{ height:130px; padding:0; margin:0; } p#p1{ position:relative; background-color:yellow; z-index:3; height:100px; padding:0; margin:0; } p#p2{ z-index:4; background-color:pink; height:100px; margin:-100px 0; position:relative; padding:0; } p#p2 span{ position:relative; z-index:5; background-color:pink; height:100px; padding:0; margin:0; } p#p3{ position:relative; background-color:yellow; z-index:3; height:100px; padding:0; margin:0; } p#p4{ position:relative; z-index:2; background-color:pink; height:100px; margin:-100px 0 ; padding:0; } p#p2 span{ position:relative; z-index:1; background-color:pink; height:100px; padding:0; margin:0; } p#p5{ position:relative; background-color:yellow; z-index:3; height:100px; padding:0; margin:0; } p#p6{ position:relative; z-index:4; background-color:pink; height:100px; margin:-100px 0 ; padding:0; opacity:0.8; filter:alpha(Opacity='95'); } p#p6 object{ position:relative; z-index:5; background-color:pink; height:100px; padding:0; margin:0; } p#p7{ position:relative; background-color:yellow; z-index:3; height:100px; padding:0; margin:0; } p#p8{ position:relative; z-index:2; background-color:pink; height:100px; margin:-100px 0 ; padding:0; opacity:0.95; filter:alpha(Opacity='95'); } p#p8 object{ position:relative; z-index:1; background-color:pink; height:100px; padding:0; margin:0; } </style> </head> <body> <div> <p id="p1">あいうえ</p> <p id="p2"><span>おかきく</span></p> </div> <div> <p id="p3">けこさし</p> <p id="p4"><span>すせそた</span></p> </div> <div> <p id="p5">あいうえ</p> <p id="p6"> <object data="movie.swf" type="application/x-shockwave-flash" width="100%" height="100"> <param name="movie" value="movie.swf" /> <param name="wmode" value="Transparent"> </object> </p> </div> <div> <p id="p7">けこさし</p> <p id="p8"> <object data="movie.swf" type="application/x-shockwave-flash" width="100%" height="100"> <param name="movie" value="movie.swf" /> <param name="wmode" value="Transparent"> </object> </p> </div> </body> </html>
その他の回答 (2)
- himajin100000
- ベストアンサー率54% (1660/3060)
もうしわけない。追記だ。 1. wmodeを使用しているFlashは透明色 2. p8で上からかぶせようとしたが失敗している。正確にはp6は「下」にある
objectタグだとどう？
お礼
SAYKAさん レスありがとうございました。 embedタグでwmode="transparent"で出来るようです。objectタグの中にembedを入れ子にしても同様のようです、またjavascriptでdocument.writeの内容にembed以下を書いてもレイヤー効果のようになるようです。 ありがとうございました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
himajinさん 詳細なご指導真にありがとうございました。 良く分りました。 objectにしろembedにしろwmode="transparent"を指定する点がポイントのようですね。 IE7、Firefox2.0.0.4、Opera9.02で確認してみて、いずれも ”レイヤー”のような効果がflash画像の上に出来ました。 ありがとうございました。 geohase拝