html/cssでembedとz-indexについて

解決済

質問者：geohase
質問日時：2007/07/02 21:31
回答数：3件

HTML・CSSで<DIV>を２つ使って片方にimgで画像を、もう一つに
文字を入れてz-indexで画像の上にレイヤーのような形で文字を
乗せることが出来ますが、画像の代わりにembedでflashファイル
を使うとz-indexが効かないと思います。

flashファイル（画像）の上にレイヤーのように文字を乗せる方法
がありますでしょうか？　ご存知の方が居られたらご教示ください。
geohaseでXP、IE６の環境です、よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： himajin100000
回答日時：2007/07/03 04:43

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.dt …
<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>

- 0
- 件

通報する

この回答へのお礼

himajinさん
詳細なご指導真にありがとうございました。
良く分りました。　objectにしろembedにしろwmode="transparent"を指定する点がポイントのようですね。
IE7、Firefox2.0.0.4、Opera9.02で確認してみて、いずれも
”レイヤー”のような効果がflash画像の上に出来ました。
ありがとうございました。 geohase拝

通報する

お礼日時：2007/07/03 12:40

No.3

回答者： himajin100000
回答日時：2007/07/03 11:54

もうしわけない。

追記だ。
1. wmodeを使用しているFlashは透明色
2. p8で上からかぶせようとしたが失敗している。正確にはp6は「下」にある

- 0
- 件

通報する

No.1

回答者： noname#39970
回答日時：2007/07/02 23:02

objectタグだとどう？

- 0
- 件

通報する

この回答へのお礼

SAYKAさん
レスありがとうございました。
embedタグでwmode="transparent"で出来るようです。objectタグの中にembedを入れ子にしても同様のようです、またjavascriptでdocument.writeの内容にembed以下を書いてもレイヤー効果のようになるようです。
ありがとうございました。

通報する

お礼日時：2007/07/03 12:31

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！