JavaScript : クリックした要素の位置を計算して、近くにウインドウを開く と
IE6対応の背景透過PNG用javaScript ライブラリ の合成テスト。
※ ライブラリ化する前の動作確認。
<script
type="text/javascript"
src="http://winofsql.jp/lightbox_ie6png.js"
></script>
<script type="text/javascript">
function setWin(target,x,y,w,h) {
var numY = target.offsetTop;
var numX = target.offsetLeft;
var obj = target;
while( obj = obj.offsetParent ) {
numY += obj.offsetTop;
numX += obj.offsetLeft;
if ( obj.tagName == 'BODY' ) {
break;
}
}
document.getElementById("win_base").style.top = (numY+y) + "px";
document.getElementById("win_base").style.left = (numX+x) + "px";
document.getElementById("win_base").style.width = w + "px";
document.getElementById("win_base").style.height = h + "px";
document.getElementById("win_base").style.display = "";
}
</script>
<div
id="win_base"
style='
position: absolute;
display: none;
color: black;
width:0px;
height:0px;
z-index:1000;
'
onClick='event.cancelBubble = true;'>
<input
type="image"
src="http://winofsql.jp/image/mcancel.png"
style='float:right;'
onClick='this.parentNode.style.display = "none";'
>
<div id=win_box style='padding:2px;'>
<script type="text/javascript">
var ar = {
url: "http://winofsql.jp/image/fd01.png",
width: 150,
height: 100,
x: 0,
y: 0
}
lightbox_ie6png.load(ar);
var ar = {
text: "<span style='font-size:12px;'>こんにちは</span>",
x: 40,
y: 70
}
lightbox_ie6png.loadtext(ar);
</script>
</div>
</div>
<input
type="button"
value="test"
onClick='setWin(this,-15,-16,150,100)'
>
