メール
ブログ
goo ID
html/cssでembedとz-indexについて
役に立った：3件
- 投稿日時：2007/07/02 21:31
- 困り度：
HTML・CSSで<DIV>を２つ使って片方にimgで画像を、もう一つに
文字を入れてz-indexで画像の上にレイヤーのような形で文字を
乗せることが出来ますが、画像の代わりにembedでflashファイル
を使うとz-indexが効かないと思います。
flashファイル（画像）の上にレイヤーのように文字を乗せる方法
がありますでしょうか？ ご存知の方が居られたらご教示ください。
geohaseでXP、IE６の環境です、よろしくお願いします。
回答(3件)
- 最新から表示
- ｜
- 回答順に表示
- ｜
- ベストアンサーのみ表示
No.2ベストアンサー20pt
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>
この回答へのお礼
himajinさん
詳細なご指導真にありがとうございました。
良く分りました。 objectにしろembedにしろwmode="transparent"を指定する点がポイントのようですね。
IE7、Firefox2.0.0.4、Opera9.02で確認してみて、いずれも
”レイヤー”のような効果がflash画像の上に出来ました。
ありがとうございました。 geohase拝
No.1ベストアンサー10pt
objectタグだとどう？
この回答へのお礼
SAYKAさん
レスありがとうございました。
embedタグでwmode="transparent"で出来るようです。objectタグの中にembedを入れ子にしても同様のようです、またjavascriptでdocument.writeの内容にembed以下を書いてもレイヤー効果のようになるようです。
ありがとうございました。
- 最新から表示
- ｜
- 回答順に表示
- ｜
- ベストアンサーのみ表示
「IE」史上“最速＆最も安全”なブラウザ、「Internet Explorer9.0」gooバージョン登場！