Wazap! Blog - ワザップ!ブログ

本日9月25日に、ワザップ！上で無料で遊べるゲームコーナー「ワザップ!無料ゲーム」サービスを開始しました。

「ワザップ!無料ゲーム」は、ブラウザで遊べるFlashゲームやPCゲームを580タイトル以上用意。で、利用はもちろん無料！

FLASHゲームは、パズル系、アクション系などのゲームが10タイトル用意しました。各ゲームのプレイヤースコアはワザップ!上に記録され、ユーザー同士がハイスコアを競い合える仕組みにもなっています。※ワザップ!の会員である事が前提

ハイスコアによるランキングには、週間ランキング、歴代ランキングなどがあり、ユー ザーがいつでも自分のランキングを確認できるので遊び方も様々！

PCゲームもいっぱい用意してあるのでぜひこの機会に遊んでみてください。

僕はIEのdebugツールにCompanion.JSを使っています。

■公式サイトから

Firebugまでではないが、どこにエラーがあるかは分かるので助かります。

インストールするにはMicrosoft Script Debuggerが必要です。

ちょっと手間がかかるけど、ないより全然良いと思います。

インストール方法（公式サイト）

windowサイズを取得して透過背景を表示させる。

■DEMO
透過背景を表示させる

■CSS

#overlay {
	position: fixed;top: 0px;left: 0px;
	width:100%;height:100%;
	z-index:100;
}
* html #overlay { /* ie6 ハック */
	 position: absolute;
}
#overlayIn{
	background:url(http://blog.jp.wazap.com/wordpress/wp-content/uploads/2008/07/overlay.png);
}
* html #overlayIn{ /* ie6 ハック */
	background-color:#666;
	filter:alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

下記Javascriptで生成されたelementに対してstyleを指定。
*Javascriptで要素を作成する。
ポイントは、IE6で透過pngが使えないので、filter:alphaでカラー#666のアルファ値をさげている事。

■Javascript

function overlay() {
	if (document.documentElement.clientWidth) {
		var div = document.createElement("div");
		div.id = "overlay";
		var divIn = document.createElement("div");
		divIn.id = "overlayIn";
		var width = document.documentElement.clientWidth;
		var height = document.documentElement.clientHeight;
		var divInwidth = divIn.offsetWidth;
		var divInheight = divIn.offsetHeight;
		divIn.style.width = width + "px";
		divIn.style.height = height + "px";
		div.appendChild(divIn);
		var objBody = document.getElementsByTagName("body").item(0);
		objBody.appendChild(div);
	}
	Event.observe('overlay', 'click', function(){
		objBody.removeChild(div);
	});
}

Javascriptはこんな感じ。
windowサイズを取得して、要素を生成して、クリックしたら透過背景が消えるという事をやっています。

後は、ここにコンテンツを生成すれば、簡易型Lightboxの出来上がりです。