利用規約の変更について

indexページにFlashで制作したswf形式のムービーを配置しました。
ところが
ヘッダに配置してたメニューからJavaScriptでプルダウン表示されるメニューと
ムービーが重なる部分がレイヤーのような状態となり
プルダウンメニューがムービーの背面へ隠れてしまい
メニューの機能が失われてしまいました

・swfはhtmlに直接配置して表示
・プルダウンのメニューは外部に置いたjsファイルを読み込んで表示
・メニューも外部JavaScriptからの読み込み

以上の仕様なのですが問題点はswfの配置方法でしょうか?
それともJavaScriptのレイヤーに問題があるのでしょうか?

アドバイスをお願い致します

このQ&Aに関連する最新のQ&A

A 回答 (1件)

問題点は,ブラウザの仕様です。


また Flash だけで起こる問題でもありません。
enbed や object で貼り付けるたぐいの動画などもそうなります。
そういうたぐいのものの上には何も表示できません。

OS が Windows で, ブラウザも IE と他少々に限定すれば,
SWF を貼り付けるタグを,
背景透明 か 背景不透明 にすると,
プルダウンメニューは隠れずに表示されます。
wmode="transparent"
とか
wmode="opaque"
とかです。

しかし,Mac 環境や,Win+Firefox などでは,
そもそもそのタグ自体を受けつけないので,
その方法も使えません。

この件に関しましては私も何度も回答していて,
どれが良いかわからなくなっていまいましたが,
とりあえず次のURLのものでも参考にしてみてください。

「swfファイルとHTMLを重ねる」
http://oshiete1.goo.ne.jp/qa1620013.html
  ↑教えて!goo  ↓OKWave (同じです)
http://okwave.jp/qa1620013.html



Adobe のサイトも一時期 SWF の上にプルダウンが重なるようになっていましたが,
そのときはブラウザによって出すページを振り分けていましたよ。
Win+IE なら Flash + JavaScriptのプルダウンのページを表示
Mac なら JPEG + JavaScriptのプルダウンのページを表示
のように。

面倒なので,
最初から Flash の上にプルダウンメニューを作らない人の方が多いと思います。
    • good
    • 0
この回答へのお礼

さっそくの回答ありがとうございます

ブラウザの仕様の差でしたか
薄々気になっていたので、残念です

動作確認し
[Mac]
IE ×
safari ×
FierFox ×

[Win]
IE ○
FireFox ×

という状況でした
どのブラウザでも再現できるようにとは思いますが
こういったケースではsassakunさんのアドバイス通り
JavaScriptでMac・Winそれぞれのブラウザを振り分けるというのが
スマートな組立だと思いました
(Win-IE意外はJPG)

メニューもFlashで…と思いましたが
更新の事などを考えると前者の方が良いですよね

早期にトラブルシュートできました
助かりました
ありがとうございます

お礼日時:2007/02/13 22:56

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSプルダウンメニューとjQueryの重なりについて

CSSプルダウンメニューとjQueryの重なりについて

下記サイト
http://www.karuizawanet.com/cgi-bin/database/database.cgi?cmd=s&sc=hotel

にてCSSプルダウンメニューと

Simple jQuery Spy Effect(要素の自動スクロール)
http://f32.aaa.livedoor.jp/~azusa/index.php?t=ajax&p=jquery_plugin_scroll

を設置していますが、

CSSプルダウンメニューが
要素の自動スクロールの下に隠れてしまい
困っています。

CSSのz-indexを入れてみましたが、改善されません。

どなたかお力添えをお願いいたします。

Aベストアンサー

cssでul.menu ulを下記の通り書き換え。

position:relative;

position:absolute;

以下追加。
z-index:2;

QHTMLページ上でiframeを最前面に出したい。

Javaを使用せずにHTMLページ上に埋め込んだiframeを最前面に出す方法はないでしょうか?

ヤフーショップページの左側にあるサイドナビ内のフリースペース枠にiframeでカテゴリーを埋め込んでいます。

その際にiframe枠内ではアコーディオン系のマウスオーバーにてサブメニューが右側に表示されるような感じの事を行っていますが、トリプルサービスでのトップページでは表示になんら問題はないものの、ヤフーショッピングサイトではHTMLタグの制限で外部CSS及びJavaが使用できず何とかならないものかと色々試行錯誤するものの解決の糸口が見当たりません(汗

z-indexをiframeタグに加えてみたもの効かず、overflow:visible;でも効かず、ダメもとでsrc=""のファイル名直後に?wmode=transparentを書き加えてももちろんダメでした(汗

Youtubeの時に?wmode=transparentが有効だったのでもしかして!?と思ったのですが。。。

ヤフーショッピングにてサイドナビ内に設置したいカテゴリが商品量に相応し縦長になり、更にはサイドカテゴリ部より直接商品ページへ飛ばしたいと考えており益々長くなってしまいバランスが悪いのでアコーディオン形のものが埋められればと試行錯誤しております。

他に表示的なアドバイスを含め、何か策があればご教授をお願いします m( . . )m

Javaを使用せずにHTMLページ上に埋め込んだiframeを最前面に出す方法はないでしょうか?

ヤフーショップページの左側にあるサイドナビ内のフリースペース枠にiframeでカテゴリーを埋め込んでいます。

その際にiframe枠内ではアコーディオン系のマウスオーバーにてサブメニューが右側に表示されるような感じの事を行っていますが、トリプルサービスでのトップページでは表示になんら問題はないものの、ヤフーショッピングサイトではHTMLタグの制限で外部CSS及びJavaが使用できず何とかならないものかと色々試行錯...続きを読む

Aベストアンサー

要素のスタイルに z-index だけでなく、position: relative も加えてください。

要素に z-index を適用する場合、その要素の position が static 以外の値でないといけません:
つまり relative, absolute, fixed のどれかです。
position: relative を指定し top, right, bottom, left の値を指定しなければ(デフォルト値の auto にしておけば)、要素の位置はそのままに z-index で重なり順を制御できるはずです。
この手法で表示崩れを生じる場合は他のスタイルとの干渉が考えられます。


表示に関するアドバイス、余計なお世話かもしれませんが加えます。
『縦長になってバランスが悪いので』といった理由で JavaScript を用いたアコーディオン型メニューを加えているなら、それはきっとやめたほうがよいでしょう。
JavaScript がオフの環境は考慮されているかという問題以前に、バランスの悪くなるほど縦長のメニューは折り畳んだところで使い勝手は悪いままの場合がほとんどです。

なぜ縦長のメニューになるのでしょう。
カテゴリを細かく分類しすぎなのか。
それとも最下層のカテゴリまで一度に表示しようとしているのですか。
考慮の浅い分類は、表示の工夫以前にそもそも使いづらい運命です。

ぱっと見で収まるくらいの分類数に収めるよう考え直してみてはどうでしょう。
分類しづらい、あまりにかけ離れた商品種を扱っているなら、それは別のショップとしてサイトを作るべきです。
細かな分類は、大きな分類を選んだあとに表示するべきです。
数十の分類から一つを探し出すより、数個の分類を複数回渡り歩くほうがユーザーにストレスはかからないそうです(一回のクリックまでが短ければ、複数回クリックは苦にならない)。
細かな分類まで最初に見せたい理由が、その中に人気の商品があるなどであるなら、それは別枠の分類『人気の商品』『新商品』などとしてリンクを設けるべきで、わらの中から針を探すという苦行をユーザーにさせるべきではありません。

あとただの偏見ですが、マウスオーバーで出てくるサブメニューは使い勝手の悪い印象があるので、よほど洗練された使い方でない限りそれがあるだけでサイトの評価減です。

提供側の『このように見せたい』ではなく、利用側の『このように見たい』が優先される世界を願って。
(Amazon などは『このように見たい』の中にさりげなく彼らの売りたいものを混ぜてくるので、さすがだと思っています)

参考URL:http://webdesignrecipes.com/css-visual-formating-model/

要素のスタイルに z-index だけでなく、position: relative も加えてください。

要素に z-index を適用する場合、その要素の position が static 以外の値でないといけません:
つまり relative, absolute, fixed のどれかです。
position: relative を指定し top, right, bottom, left の値を指定しなければ(デフォルト値の auto にしておけば)、要素の位置はそのままに z-index で重なり順を制御できるはずです。
この手法で表示崩れを生じる場合は他のスタイルとの干渉が考えられます。


表示に関するアド...続きを読む

Qフレームを跨ぐドロップダウンメニューの方法

フレームを跨いでドロップダウンメニューを表示するにはどうすればよいのでしょうか。

フレームで上下に分割し、上のフレームにjqueryを利用したドロップダウンメニューを使いたいのですが、下のフレームに差し掛かると切れてしまいます。ドロップダウンメニューは以下のものです。
http://onehackoranother.com/projects/jquery/droppy/

フレーム自体が既に主流ではないのは承知なのですが、使わざるを得ない事情がありまして・・・。
色々検索しても出てこず、大変困っております。
z-indexを指定したりしてみましたが解決しませんでした。
どなたかお教えいただけますと幸いです。

Aベストアンサー

書き忘れましたので、連投失礼します。

z-indexを指定しても効果がないのは、当然です。
z-indexは、そのHTMLファイル内での重なり順を指定するものです。

フレーム分割をする場合、フレームを定義するHTMLファイルと、
各フレーム内に表示されるHTMLは別ですので、
後者内でz-indexを指定しても、前者の定義を書き換えられません。

以上のことから分かる通り、
インラインフレームを使用すれば解消できますが、

フレームを使わざるを得ないとのことなので、不可能です。

QswfファイルとHTMLを重ねる

こんばんわ。以前にも同じような質問をされていた方がいるんですが、どうしても出来ないためご教授ください。

現在HPのトップページを作っているのですが、FLASHで作成したメニューバーの各項目をそのすぐ下にあるHTMLで書いた文章もお構い無しに重なって、下方向に伸びるサブメニューが出る。という風にしたいのですがどうしても重なってくれません。

パブリッシュ設定でウィンドウモードを透明表示にし、HTMLに<object>内にも
transparentの値をいれていますが、上手くいきません。

分かりにくい説明ですが、どなたか助けてください。

Aベストアンサー

他の所を見られたのでしたら話が早いです。
transparentタグは環境に依存しますので,Flashの上には物は置けないというのが常識になっています。
お使いなのは,Macでしょうか。
Windowsであるとするなら,Operaや特殊なブラウザを使っていないかぎり,サブメニューは重ねられるはずです。

ちなみに,EMBEDの方にもtransparentの値が入っていますか?
wmode="transparent"

私ではありませんが,

http://okweb.jp/kotaeru.php3?q=1566552
↓同じ物↑
http://oshiete1.goo.ne.jp/kotaeru.php3?q=1566552

で回答されている,#1の方の書かれていることや,その参考URLも参考にしてみてください。

なお,こちらには,全タグを書いております。
http://oshiete1.goo.ne.jp/kotaeru.php3?q=1585290

これ以外の方法はわかりませんし,
重ねられないなら,重ねられないで,ラッキーなことだと思います。
どの環境でも,重なっていると勘違いされるよりずっと良いと思います。

またFlashは,CSSやJavaScriptのような定型のプルダウンメニューのようなものではなく,もっともっと自由にメニューが作れます。
せっかくFlash作成ソフトをもっていらっしゃるのなら,別のアプローチ方法を考えて見るのも良いかもしれません。

他の所を見られたのでしたら話が早いです。
transparentタグは環境に依存しますので,Flashの上には物は置けないというのが常識になっています。
お使いなのは,Macでしょうか。
Windowsであるとするなら,Operaや特殊なブラウザを使っていないかぎり,サブメニューは重ねられるはずです。

ちなみに,EMBEDの方にもtransparentの値が入っていますか?
wmode="transparent"

私ではありませんが,

http://okweb.jp/kotaeru.php3?q=1566552
↓同じ物↑
http://oshiete1.goo.ne.jp/kotaeru.php3?q=15665...続きを読む

Qプルダウンメニューの開く方向をコントロールしたいのですが

はじめまして、flyingmanと申します。いつも皆なさんの質問・回答で勉強させていただいて大変感謝しております。

さて今回、年・月・日・時を選択するために4つのプルダウンメニューをselectタグを使い作成したのですが、日指定のプルダウンメニューだけが、上方向に開いてしまいほかの3つのメニューと開く方向をそろえたいと色々調べておりますがなかなかいい方法が見つからないしだいです。
selectタグへのスタイル指定でそのようなことができるかどうか教えていただけないでしょうか?

環境
OS:WindowsXP SP2
ブラウザ:Internet Explorer Ver6.0 のみ

プルダウンメニューの開く方向は、プルダウンメニューの位置と開くメニューの高さで自動に決まってしまうのだろうとは思うのですが、位置をずらさずに開く方向だけを変更できる方法をご存知でしたら教えてください。
よろしくお願いいたします。

Aベストアンサー

#1補足>
補足ありがとうございました。
状況は確認できましたが、やはり、そのような指定をする設定はないようです。

Qdivタグ内のコンテンツが重なって表示されてしまう。

下記のようなHTMLを表示させるときに
IEでは上下に並んで表示されるのですが、FF、Operaなどでは重なって表示されてしまいます。
どうしたら、上下に並べて表示させられますか?

<div id="a">
<div id="b">
<ul>
<li>重なってしまう文字列</li>
<li>重なってしまう文字列</li>
</ul>
</div>
</div>
<table>
<!-- このテーブルタグの上に重なって表示されてしまう -->
</table>

Aベストアンサー

CSSのどの部分かよくわからないなら
タグで指定したstyle属性の方が優先するはずだから
style="position:relative;clear: both;"
で直接打ち変えてしまえば。

Qドロップダウンメニューを作るこのCSSどこが変?

お世話になります。
Webサイトのメニューボタンにマウスオンすると下部にダウンメニューが飛び出す仕様をCSSで作りたいと思っています。添付ファイルのように、ボタン画像の下にまたメニュー項目(background-imageがついてくる)が展開していくよくある仕様です。
ネットでの情報を参考にしながら、書いたソースが以下のものですが、
問題は(1)ダウンメニューにしたいのにむしろ上部へ表示される
(2)テキスト分しか表示されない、きちんと画像全体を表示させたい!

個人的にもいろいろ試行錯誤してみましたが、どうも分かりませんでした。
もしかしたら、ものすごく基本的なところでつまずいているかもしれませんが、どうかご容赦ください。
もしよろしければアドバイスお願いします。

HTML---

<div id="global_nav">
<ul>
<li><a href="#"><img src="images/button_06.gif" alt="TOPボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_07.gif" alt="Aボタン" class="btn"/></a>
<ul>
<li><a href="#">会社概要</a></li>
<li><a href="#">営業所</a></li>
</ul>
</li>
<li><a href="#"><img src="images/button_08.gif" alt="Bボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_08.gif" alt="Cボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_08.gif" alt="Dボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_08.gif" alt="Eボタン" class="btn"/></a></li>
</ul>
</div>

CSS---

#global_nav {
float:right;
width:720px;
margin:0;
padding-right:15px;
}
#global_nav img {
float:left;
display:block;
border:0;
}
#global_nav ul {
list-style:none;
margin:0;
padding:0;
}
#global_nav li {
min-width:120px;
white-space:nowrap;
float:left;
}
#global_nav ul ul {
display:none;
position:absolute;
z-index:10;
padding-top:2px;
}
#global_nav ul ul a {
font-family:"MS Pゴシック", "ヒラギノ角ゴ Pro W3", sans-serif;
font-size:0.75em;
color:#FFF;
background-image:url(../images/dawnmenu_button.gif);
height:40px;
width:120px;
text-decoration:none;
text-align:center;
padding:20px 10px 0 10px;
}
#global_nav li li {
clear:left;
position:relative;
width:100%
}
#global_nav ul li:hover > ul {
display:block;
}

お世話になります。
Webサイトのメニューボタンにマウスオンすると下部にダウンメニューが飛び出す仕様をCSSで作りたいと思っています。添付ファイルのように、ボタン画像の下にまたメニュー項目(background-imageがついてくる)が展開していくよくある仕様です。
ネットでの情報を参考にしながら、書いたソースが以下のものですが、
問題は(1)ダウンメニューにしたいのにむしろ上部へ表示される
(2)テキスト分しか表示されない、きちんと画像全体を表示させたい!

個人的にもいろいろ試行錯誤してみましたが、...続きを読む

Aベストアンサー

>ドロップダウンボタン領域時には親ボタンはロールオーバー表示されませんでした。

 :hoverしているのは、どの要素でしょう。そしてプルダウンメニュー上に:hoverしているときは、その要素の上にありますか?

>これはclearする必要はないのでしょうか?

 なんのために?ここで、次に続く要素(回り込む要素)はどこにあるでしょう。

 HTMLの構造を簡単に頭に入れて、CSSだけを上から順番に何を選択しているか、セレクタの書き方を読み取ってください。大事なことは理解することです。特に詳細度の計算だけは身につけること。先の回答で示した参照先はよく読んでください。回り道のようですが、実際はもっとも早い方法です。(急がば回れ)

Qプルダウンの表示位置

プルダウンを右端にセットしたいのですが、

右端というのは、画面ではなく、自分の設定した幅の右端という事です。

従って、DIVでALIGN="RIGHT"とかはウィンドウの大きさに対して動いてしまうのでダメです。

なにかいい方法があれば、よろしくお願いします。

Aベストアンサー

指定幅のテーブルを作り、その中で
  <td align="right">
   <select name="...">
   <option value="..">項目名1
        :
   </select>
  </td>
とする。
これでNNでも問題なく表示されますよ。

No.1の補足にある
  >プルダウンの中身がおかしくなる
とは、具体的にどうなるのですか?文字化けですか?

またブラウザのバージョンもお願いします。

Qプルダウンメニュー表示時の高さの指定方法

ブラウザ上でプルダウンメニューを表示させる際に、表示される高さ(タテ幅)の指定をするにはどうすればよいか、ご存知の方は教えていただけないでしょうか?

ちなみに、プルダウンメニューの横幅は、<select>タグ内に、「style="width:(幅を指定);"」を記述することで固定幅の設定が可能でしたが・・・

なお、プルダウンメニューは初期表示として、1件のみ表示させるものとします(すなわち、<select>タグ内の「size="1"」の指定は変えないこととする)。

というのも、プルダウンに表示させる項目(条件によって可変)の件数が多い場合に、プルダウンメニュー内でスクロールさせるのをできるだけ避けたいためです。
よって、方法としては、
1.プルダウン表示させる際の高さ(タテ幅)を固定で指定する
2.可能であれば、登録されている全項目の表示をさせる
以上2つの方法を考えています。

なにかよい方法があれば、ぜひ教えてください。

Aベストアンサー

ご存知のように<select>タグの属性で縦幅を設定することはできませんね。

http://tohoho.wakusei.ne.jp/html/select.htm

スタイルでも設定はできないようですね。

異なるOSで同じブラウザで同じページの<select>タグ内を
表示しても縦幅が異なりますので
OSに依存されてしまうのでしょうか?
また、画面の解像度によるかもしれません。

Q上下フレーム分割ページでプルダウンメニューはできますか?

こんにちは。
いつもお世話になっております。

HPのコンテンツが増えてきたので、スタイルシートを
使って、プルダウンメニューにしたのですが・・・。

ちょっと、メニューの項目名を変えたい、と思った
時に、全部のページを変更してまわるのは、手間だなぁ
と思って、上下でフレーム分割をして、上に
プルダウンメニュー、したに、それぞれのページが
来るようにしたいのです。

ためしにやってみたのですが、プルダウンがしたの
ページで隠れてしまう上に、
タイムエラーが出ました。 デバッグして下さい
というエラーメッセージが出てします。

上下フレーム分割ページでプルダウンメニューはできない
のでしょうか・・・?

どうかご指導よろしくお願いいたします。

Aベストアンサー

こんにちは。No.1のものです。

プルダウンメニューを表示した時に下のフレームに
隠れてしまうとの事ですね?
確かにそうですね。すみません。
今のところ、両方とも子フレームなので、親子関係を
作ってあげたら出来るかもしれません…。

とりあえず抵抗がなければインラインフレームを
使うのが一番簡単だと思います。

前のindex.htmlを使うのをやめて、
code_top.htmlを変更します。

code_top.html---------------------------------
<iframe src="code_blank.html" name="contents" width="100%" height="95%" frameborder="0" noresize style="margin-top:60px; border-style:solid; border-width:1px; border-color:#888888;">
</iframe>
</body>
</html>
-----------------------------------------------
最後のbodyの閉じタグの直前に
上記<iframe>~</iframe>を追加してください。
トップページはcode_top.htmlとなります。

レイアウトはどのようにしているのかは
分かりませんが、とりあえず上に詰めても
かぶらないと思います。
適宜修正お願いします。

ではでは。

こんにちは。No.1のものです。

プルダウンメニューを表示した時に下のフレームに
隠れてしまうとの事ですね?
確かにそうですね。すみません。
今のところ、両方とも子フレームなので、親子関係を
作ってあげたら出来るかもしれません…。

とりあえず抵抗がなければインラインフレームを
使うのが一番簡単だと思います。

前のindex.htmlを使うのをやめて、
code_top.htmlを変更します。

code_top.html---------------------------------
<iframe src="code_blank.html" name="contents" width="...続きを読む


人気Q&Aランキング

おすすめ情報