どりーみーさんの場合
- November 25, 2008 8:53 PM
- web
どりーみーさんという方の記事「Flashなどのobjectやembed がz-indexを無視して最前面に表示」に応えての私信。というか、同記事コメント欄でのやりとりのつづきなのですが、ソース等を提示するのにラクなので記事としてここに。
というわけで、どりーみーさん。
動作テストをかねてサンプルページを用意しましたのでご覧ください。
やりたいこととしてはこういうことでいいでしょうか?
「menu-open」ボタンがクリック後「close」ボタンに切り替わって、同じマウス位置で(も)メニューの開閉ができるとより直感的かなと思い、勝手にそれも付け加えています。
上記サンプルで問題なければ、ソースの修正箇所は以下のとおりです。(行番号はそれぞれ、現行ページとサンプルページのそれです。)
修正前・JavaScript部分
- function ShowHide(id, visibility) {
- obj = document.getElementsByTagName("div");
- obj[id].style.visibility = visibility;
- }
修正後
- function ShowHide(id, visibility) {
- obj = document.getElementsByTagName("div");
- obj[id].style.visibility = visibility;
- objspan = document.getElementsByTagName("span");
- objobj = document.getElementsByTagName("embed");
- if(id=="aDiv") {
- if(visibility=="visible") {
- objspan['openbtn'].style.display = "none";
- objspan['closebtn'].style.display = "block";
- var i = objobj.length; while (i--) {
- objobj[i].style.visibility = "hidden";
- }
- }
- else if(visibility=="hidden") {
- objspan['openbtn'].style.display = "block";
- objspan['closebtn'].style.display = "none";
- var i = objobj.length; while (i--) {
- objobj[i].style.visibility = "visible";
- }
- }
- }
- }
修正前・HTML部分(ボタンのところ)
- <span style="text-align : right; float : left;"><a href="javascript:ShowHide('aDiv','visible')" title="open"><b>menu-open</b></a></span>
修正後
- <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: https://web-conte.com/blue/mt-tb.cgi/397