blue

どりーみーさんの場合

  • Posted by: SOMA Hitoshi
  • November 25, 2008 8:53 PM
  • web

 どりーみーさんという方の記事「Flashなどのobjectやembed がz-indexを無視して最前面に表示」に応えての私信。というか、同記事コメント欄でのやりとりのつづきなのですが、ソース等を提示するのにラクなので記事としてここに。

というわけで、どりーみーさん。

 動作テストをかねてサンプルページを用意しましたのでご覧ください。
 やりたいこととしてはこういうことでいいでしょうか?
 「menu-open」ボタンがクリック後「close」ボタンに切り替わって、同じマウス位置で(も)メニューの開閉ができるとより直感的かなと思い、勝手にそれも付け加えています。

 上記サンプルで問題なければ、ソースの修正箇所は以下のとおりです。(行番号はそれぞれ、現行ページとサンプルページのそれです。)

修正前・JavaScript部分
  1.  function ShowHide(id, visibility) {
  2.      obj = document.getElementsByTagName("div");
  3.      obj[id].style.visibility = visibility;
  4.  }
修正後
  1.  function ShowHide(id, visibility) {
  2.      obj = document.getElementsByTagName("div");
  3.      obj[id].style.visibility = visibility;
  4.      objspan = document.getElementsByTagName("span");
  5.      objobj = document.getElementsByTagName("embed");
  6.      if(id=="aDiv") {
  7.          if(visibility=="visible") {
  8.              objspan['openbtn'].style.display = "none";
  9.              objspan['closebtn'].style.display = "block";
  10.              var i = objobj.length; while (i--) {
  11.                  objobj[i].style.visibility = "hidden";
  12.              }
  13.          }
  14.          else if(visibility=="hidden") {
  15.              objspan['openbtn'].style.display = "block";
  16.              objspan['closebtn'].style.display = "none";
  17.              var i = objobj.length; while (i--) {
  18.                  objobj[i].style.visibility = "visible";
  19.              }
  20.          }
  21.      }
  22.  }
修正前・HTML部分(ボタンのところ)
  1.  <span style="text-align : right; float : left;"><a href="javascript:ShowHide('aDiv','visible')" title="open"><b>menu-open</b></a></span>
修正後
  1.  <span id="openbtn" style="text-align : right; float : left;"><a href="javascript:ShowHide('aDiv','visible')" title="open"><b>menu-open</b></a></span><span id="closebtn" style="text-align : right; float : left; display: none;"><a href="javascript:ShowHide('aDiv','hidden')" title="close"><b><img src="images/x2.gif" border="0"> menu-close</b></a></span>

多少の解説

 現行ページのソースを見るかぎり、ShowHideのスクリプトはメニューの表示・非表示にのみ(それ専用のスクリプトとして)用いられるのかなとも思いますが、一応もとの汎用性を残すかたちでコードを書き足しています。

 ドキュメント内のFlashを探し出す部分(修正後ソース・19行目)、最初は「getElementsByTagName("object")」というふうにやろうとしていたのですが、なぜかそれだとIEでうまくいきません。「"embed"」で試すと動作したので、それ以上深く考えず採用しています。

 IE6(Win)、IE7(Win)、Firefox3(Mac)、Opera9(Mac)にて動作確認しています。なお、Firefox3では現行ページのママでFlashはきれいにメニューの下に隠れてくれます。またこのソースの場合、Safari3(Mac)ではFlashが非表示に切り替わりませんが、Safari3ももともとFlashが下に隠れてくれるので結果とくに問題はありません。

 どうでしょうか。

関連記事

トラックバック(0)

トラックバックURL: http://web-conte.com/blue/mt-tb.cgi/397