http://www.mabinogi.jp/
参考ページはポップアップで表示されるメニューがFLASHの領域外に表示されている（様に）見えます。このテクニックは推測するに、FLASHを透過させる手法と、CSSでレイヤーの様なものを構成させる手法をあわせて使い、重ねて表示させているのではないかと思っています。
仮にこの手法が正解（あるいは実現可能）だった場合、FLASHの透過という手法と、CSSでレイヤーを扱う手法をお願いいたします。違う方法の場合はどのような手法なのかをよろしくお願いいたします。
限定的なテクニックのため参考資料も見つからず途方に暮れており質問しました。
参考ページ、参考書や断片的なテクニックでもかまいませんが、一連のソースプログラム,HTMLを例示いただければ、より高いポイントをお渡しいたします。
よろしくお願いいたします。
No.2
65
3
100pt
上記のサイトは少し手が込んでいるようですが、同じようなことをするのであればCSSとFLASHでシンプルに作れます。
まずCSSでレイヤーの作り方はこちらが参考になります。
http://www.dspt.net/stylesheet_css/005/007.html
サンプル
http://www.dspt.net/stylesheet_css/005/sample/007.html
その後z-indexというプロパティで重なり順を設定します。
http://www.dspt.net/stylesheet_css/005/019.html
サンプル
http://www.dspt.net/stylesheet_css/005/sample/019.html
サンプルで説明しますと「z-index:1;の要素」の部分にFLASHを挿入し、「z-index:0;の要素」に通常の文章・画像を挿入します。
これだけですと、FLASH部分が透過されないので以下のテクニックを使います。
http://www.publicroots.com/fmt/archives/000085.html
私の作ったサンプルコードです。hoge.swfの部分を適宜書き換えてください（メニューのFLASH等）。
28
27
<div id="Layer1" style="position:absolute; left:145px; top:50px; width:690px; height:600px; background: #ddd5ff; z-index:0">
画像や文章
</div>
<div id="Layer2" style="position:absolute; left:145px; top:53px; width:690px; height:405px; z-index:1">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="689" height="600">
<param name="movie" value="hoge.swf">
<param name=quality value=high><param name="wmode" value="transparent">
<embed src="hoge.swf" width="689" height="600" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#000000" wmode="transparent"></embed>
</object>
</div>
<div>
No.1
152
50pt
ポップアップで表示されるメニューの場所がちょっとわからなかったのですが、どこを押せば確認できるでしょうか？
手順をお教えいただければ、検証しやすいと思います。
FlashをHTML上に透過させる方法については、以下のページが参考になります。
http://f-site.org/articles/2006/09/09042615.html
JavaScriptを使用しているようです。
HTMLとCSSのみで実現したいということですが、例として出していただいたサイトはJavaScriptを使用して
swfを表示していますので、JavaScriptを用いて透過させている可能性が高いです。
ご回答ありがとうございます。
ポップアップという表現が的を得ていなかったかもしれません。水色のメインメニューのところです。「お知らせ、コミュニティー・・・」と続いている欄です。こちらにマウスカーソルをあわせると、プルダウンメニューが表示され下のお知らせの箇所と重なって表示されています。このテクニックが欲しいところになります。
JavaScriptでできる技術なのですね。CSSを使いたいという訳ではありませんので、同じことができれば（普及している技術であれば）問題ありません。ありがとうございます。
また、ご参考URLありがとうございます。時間はかかりそうですがこのスクリプトを解読していけばできそうな気がします。
引き続き質問への回答は受付いたしますのでよろしくお願いいたします。
No.2
653
ここでベストアンサー
100pt
上記のサイトは少し手が込んでいるようですが、同じようなことをするのであればCSSとFLASHでシンプルに作れます。
まずCSSでレイヤーの作り方はこちらが参考になります。
http://www.dspt.net/stylesheet_css/005/007.html
サンプル
http://www.dspt.net/stylesheet_css/005/sample/007.html
その後z-indexというプロパティで重なり順を設定します。
http://www.dspt.net/stylesheet_css/005/019.html
サンプル
http://www.dspt.net/stylesheet_css/005/sample/019.html
サンプルで説明しますと「z-index:1;の要素」の部分にFLASHを挿入し、「z-index:0;の要素」に通常の文章・画像を挿入します。
これだけですと、FLASH部分が透過されないので以下のテクニックを使います。
http://www.publicroots.com/fmt/archives/000085.html
私の作ったサンプルコードです。hoge.swfの部分を適宜書き換えてください（メニューのFLASH等）。
<div id="Layer1" style="position:absolute; left:145px; top:50px; width:690px; height:600px; background: #ddd5ff; z-index:0">
画像や文章
</div>
<div id="Layer2" style="position:absolute; left:145px; top:53px; width:690px; height:405px; z-index:1">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="689" height="600">
<param name="movie" value="hoge.swf">
<param name=quality value=high><param name="wmode" value="transparent">
<embed src="hoge.swf" width="689" height="600" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#000000" wmode="transparent"></embed>
</object>
</div>
<div>
ご回答ありがとうございます。
非常に丁寧にご回答いただきましてありがとうございました。
最後のコードもオリジナルを制作していただき、大変わかりやすく、すぐ確認することができました。
ご回答いただいた内容を実際にやってみました結果をご報告いたします。
z-indexという概念で至極簡単に実現できました。Flashも外部パラメータで一発で透過できるということがわかり驚きました。
これで初期に表示なしのFlashを用意しておけば、途中からメニューを表示させる透過メニューが実現できそうです。
ただ一つ問題があるのは、透過フラッシュを重ねた部分については
透過時も（なにもMovieClipをおかない部分であったとしても）
マウスの押下イベントが下層のHTMLに届かないということです。
ご例示いただいた背面の「画像や文章」というところに
アンカー( A HREF="")を差し込んでみたところページが転送されませんでした。
欲を言えば背面にもアンカーがくる可能性がございますのでこちらの解決方法や、あるいはその他の方法による解決策を皆様にひきつづき募集いたします。よろしくお願いいたします。
No.3
653
100pt
確認してみたところ、ブラウザによって動作が違うようです。
IE7：可
FireFox:不
Safari:不
上記のサイトではJavaScriptでIEかそうでないかを判断しているようで（サイト内のnavigation.js参照）、IEでない場合はFlashではなくJavaScriptでメニューを構築しているようです。
JavaScriptでのメニュー構築はこちらが参考になります。
happy1980
2008/06/21 14:12:53
1
1
1
1
1
ご回答ありがとうございます。
非常に丁寧にご回答いただきましてありがとうございました。
最後のコードもオリジナルを制作していただき、大変わかりやすく、すぐ確認することができました。
ご回答いただいた内容を実際にやってみました結果をご報告いたします。
z-indexという概念で至極簡単に実現できました。Flashも外部パラメータで一発で透過できるということがわかり驚きました。
これで初期に表示なしのFlashを用意しておけば、途中からメニューを表示させる透過メニューが実現できそうです。
ただ一つ問題があるのは、透過フラッシュを重ねた部分については
透過時も（なにもMovieClipをおかない部分であったとしても）
マウスの押下イベントが下層のHTMLに届かないということです。
ご例示いただいた背面の「画像や文章」というところに
アンカー( A HREF="")を差し込んでみたところページが転送されませんでした。
欲を言えば背面にもアンカーがくる可能性がございますのでこちらの解決方法や、あるいはその他の方法による解決策を皆様にひきつづき募集いたします。よろしくお願いいたします。