« Safariでtextareaを選択状態にできない | トップページ | はてブでYahoo!が登録数1万超え、「ブックマーク数を画像で取得するAPI」の限界が露呈? »

2011年3月28日 (月曜日)

z-indexを無視してFlashが上に重なってしまうのに対処

 JavaScriptでDOMな感じのプログラミング。z-indexを使ってレイヤーを前面に表示しようとすると、それを無視してFlashが最前面(一番上)に覆いかぶさってしまう。これをなんとかしたい。

 静的なHTMLの場合、というか、自分で作ったHTMLならパラメータの指定でなんとかなるという。Lightboxを使った際の回避方法として以下が見つかる。

Flash コンテンツが z-index を無視して覆い被さってしまう件 :: drk7jphateb - Flash コンテンツが z-index を無視して覆い被さってしまう件 :: drk7jp

Flash に wmode ってパラメータがあります。このパラメータで Flash の背景を透明化または不透明化の設定が可能です。この透明化の機能を利用することで Flash コンテンツが z-index を無視して一番上に表示されてしまう不具合を解消することができます。
 なるほど。

 しかし、今回はこれでは解決できない。ブックマークレットで、どのページでもFlashを最前面にしないようにしたい。z-indexを使ってレイヤーを作るということで参考にしたのがこれ。とてもスタイリッシュなiPhone、iPod touchのブックマークレット。

はてなブックマーク用ブックマークレット for iPhone - sarusaruworld lab - Web Labhateb - はてなブックマーク用ブックマークレット for iPhone - sarusaruworld lab - Web Lab

 上記はiPhone用なのでFlashは関係ないのだけど、参考になるコードがあったのでそれをFlashコンテンツにも応用。

 自分が表示したい覆いかぶさるレイヤー(以下、自前レイヤー)を表示する際に、Flshaコンテンツをいったん消す。で、自前レイヤーを消す際に、Flashコンテンツの表示を元に戻すという手順になる。そのために2つの関数を作成。以下、コード。

//hide flash
function hideFlash(){
	var objectTags = document.getElementsByTagName("embed");
	for (var i=0; i<objectTags.length; i++){
		var objectTag = objectTags[i];
		objectTag.style.display = "none";
	}
	var objectTags = document.getElementsByTagName("object");
	for (var i=0; i<objectTags.length; i++){
		var objectTag = objectTags[i];
		objectTag.style.display = "none";
	}
}
//show flash
function showFlash(){
	var objectTags = document.getElementsByTagName("embed");
	for (var i=0; i<objectTags.length; i++){
		var objectTag = objectTags[i];
		objectTag.style.display = "block";
	}
	var objectTags = document.getElementsByTagName("object");
	for (var i=0; i<objectTags.length; i++){
		var objectTag = objectTags[i];
		objectTag.style.display = "block";
	}
}

 これでうまくいった。問題点は解消。上記リンクの方々、ありがとうございます。とくにsarusaru worldさんのブックマークレットは機能もさることながら、デザインもかっこいい。自分が作りかけのやつもこれを元に全面やり直し中(というかパクり中)。デザインはあんなにかっこよくならない気配ですが、IEやFirefoxなど各種ブラウザで使えるよう鋭意作成中。


|

« Safariでtextareaを選択状態にできない | トップページ | はてブでYahoo!が登録数1万超え、「ブックマーク数を画像で取得するAPI」の限界が露呈? »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35726/51238408

この記事へのトラックバック一覧です: z-indexを無視してFlashが上に重なってしまうのに対処:

« Safariでtextareaを選択状態にできない | トップページ | はてブでYahoo!が登録数1万超え、「ブックマーク数を画像で取得するAPI」の限界が露呈? »