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

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の出来上がりです。

●hover時にalphaをきかせる
■filter:alphaを使う。

alphaImage a:hover{
zoom: 1;
filter:alpha(opacity=65);
-moz-opacity:0.65; //mozira
opacity:0.65; //IE
}

(続きを読む…)

■HTML側

<a href="#" onmouseover="wazap('<?php wazap(); ?>' ?>')">wazap</a>
<div id="result"></div>

■Javascript側

function wazap(url){
$('result').innerHTML = "<a href='http://jp.wazap.com?url="+ url + "'>wazap</a>";
}