¾È³»Ã¢ À§Ä¡½Ã۱â 1 Go dhtml ¿¹Á¦

¾È³»Ã¢ À§Ä¡½Ã۱â 2



¾î¶² ¸µÅ©¸¦ ´­·¶À» ¶§, ¾È³»¸»À̳ª º»¹®¿¡¼­ ÇÊ¿äÇÑ ¼³¸íÀ» »ç¿ëÀÚ¿¡°Ô º¸¿©ÁÖ°íÀÚ ÇÑ´Ù¸é »ç¿ëÇÒ ¼ö ÀÖ´Â ¹æ¹ýÀÌ alert âÀ̳ª »õ·Î¿î âÀ¸·Î ÇÒ ¼ö°¡ Àִµ¥, ¹öÁ¯4ÀÇ ºê¶ó¿ìÀú¿¡¼­´Â ·¹À̾îÀÇ visibility property·Î À̰ÍÀ» ÇÒ ¼ö ÀÖ½À´Ï´Ù. alert âÀ̳ª »õ·Î¿î âÀ» ¿©´Â°Íº¸´Ù À̰ÍÀ» »ç¿ëÇϸé style·Î ·¹À̾ ²Ù¹Ð ¼ö ÀÖ°í ¸µÅ©ÀÇ À§Ä¡¿¡ ´Ù¸¥ À̺¥Æ® ÁÂÇ¥·Î ¾È³»Ã¢ÀÇ À§Ä¡¸¦ Á¶Á¤ÇÒ ¼ö ÀÖ¾î ÈξÀ ¿¹»Ú°í º¸±â ÆíÇÑ ¾È³»Ã¢À» º¸¿©ÁÙ ¼ö ÀÖ½À´Ï´Ù.
<style>
#S1 { position:absolute; top:0; left:0; width:200; visibility:hidden; 
	background-color:#eeeeee; layer-background-color:#eeeeee; 
	border-width:10; border-style:ridge; border-color:red; font-size:10pt; 
} 
</style>

<div id=S1>
<P ALIGN="RIGHT"><a href="#" onClick="hideLayer('S1'); return false">close</a></P>
¾È³»Ã¢À» ¿­¾ú½À´Ï´Ù. <br> ¿À¸¥ÂÊ À§ÀÇ close¸¦ ´©¸£¸é âÀ» ´Ý½À´Ï´Ù.
</div>
¾È³»Ã¢À¸·Î º¸¿©ÁÙ css-p ·¹À̾îÀÔ´Ï´Ù. visibility:hidden;·Î ÆäÀÌÁö°¡ Ãâ·ÂµÇ´Â óÀ½¿¡´Â º¸ÀÌÁö ¾Ê½À´Ï´Ù.

¾È³»Ã¢ º¸±â

À§ÀÇ ¸µÅ©¸¦ ´©¸£¸é visibility:hiddenÀ¸·Î ÁöÁ¤µÇ¾î ÀÖ´Â À§ÀÇ S1 ·¹À̾ visibility:visible·Î ÇÏ¿© º¸¿©ÁÖ°í click À̺¥Æ® ÁÂÇ¥¸¦ ·¹À̾îÀÇ top °ªÀ¸·Î ÁöÁ¤ÇÕ´Ï´Ù. ±×·¡¼­, ¸µÅ©ÀÇ À§Ä¡¿¡ »ó°ü¾øÀÌ ¸µÅ© ¹Ù·Î ¾Æ·¡¿¡ ·¹À̾ º¸¿©ÁÙ ¼ö ÀÖ½À´Ï´Ù.

<a href="#" onClick="showLayer('S1', event); return false">¾È³»Ã¢ º¸±â</a>
À§ÀÇ Äڵ尡 ¸µÅ©¿¡ »ç¿ëÇÑ °ÍÀÔ´Ï´Ù. ¹®ÀÚ¿­ 'S1'Àº º¸¿©ÁÙ ·¹À̾îÀÔ´Ï´Ù. event´Â nn4¿¡¼­ element ¾È¿¡¼­ event object¸¦ »ç¿ëÇÒ ¶§ »ç¿ëÇÏ´Â ÁöÁ¤ÀÚ(¾à¼ÓµÈ Çü½Ä)ÀÔ´Ï´Ù. (ÂüÁ¶Çϱâ)
function showLayer(X, e) {
	var OBJ
	if(n4) { 
		OBJ = document.layers[X]
		OBJ.left = e.pageX - parseInt(OBJ.document.width/2)
		OBJ.top = e.pageY
		OBJ.visibility = "visible"
	}
	else if(e4) {
		OBJ = document.all[X]
		OBJ.style.pixelTop = event.clientY + document.body.scrollTop 
		OBJ.style.pixelLeft = event.clientX + document.body.scrollLeft  - parseInt(OBJ.offsetWidth/2)
		OBJ.style.visibility = "visible"
	}
}
X¿¡ º¸³»¿Â ·¹À̾î À̸§À» ³»ºÎº¯¼ö OBJ¿¡ ÁöÁ¤Çϰí À̰ÍÀ» »ç¿ëÇÏ¿© ·¹À̾ ´Ù·ì´Ï´Ù. nn4ÀÇ event propertyÀÎ pageY´Â Àüü ¹®¼­¿¡¼­ÀÇ ¼öÁ÷À§Ä¡ÀÔ´Ï´Ù. ¹Ý¸é¿¡ ie4ÀÇ clientY´Â º¸ÀÌ´Â ºÎºÐ¿¡¼­ÀÇ ¼öÁ÷ À§Ä¡ÀÔ´Ï´Ù. ±×·¡¼­, À̵¿¹Ù·Î ÆäÀÌÁöÀÇ ¹®¼­¸¦ À̵¿Çϸé À̵¿Çß´Â ¸¸Å­ÀÇ Â÷À̰¡ ³³´Ï´Ù. ±×·¡¼­, ÆäÀÌÁö¿¡¼­ À̵¿ÇÑ °Å¸®¸¦ ³ªÅ¸³»´Â document.body.scrollTop¸¦ ´õÇØÁÖ¸é nn4ÀÇ pageY¿Í °°Àº µ¿ÀÛÀ» ÇÕ´Ï´Ù.

OBJ.document.width´Â nn4¿¡¼­ ·¹À̾îÀÇ Å©±â¸¦ ³ªÅ¸³À´Ï´Ù. ie4´Â OBJ.offsetWidthÀÔ´Ï´Ù . ÀÌ µÑÀº border¸¦ Æ÷ÇÔÇÑ ·¹À̾î ÀüüÀÇ Å©±âÀÔ´Ï´Ù. À̰ÍÀ» ³ÖÀº ÀÌÀ¯´Â ¸µÅ©ÀÇ Áß¾ÓÀ¸·Î ¾È³»Ã¢À» À§Ä¡ ½Ã۱â À§Çؼ­ÀÔ´Ï´Ù.

¾È³»Ã¢ ¾ÈÀÇ close´Â ¾È³»Ã¢ ·¹À̾îÀÇ visibility¸¦ hiddenÀ¸·Î ÁöÁ¤ÇÏ¿© âÀ» ´Ý´Â °ÍÀÔ´Ï´Ù.


À§ÀÇ ¾È³»Ã¢Àº ÀÛÀº âÀÔ´Ï´Ù. ¸¸¾à, ¾È³»Ã¢ÀÌ Å©´Ù¸é ÆäÀÌÁö¿¡¼­ÀÇ À§Ä¡½ÃÅ´¿¡ ´Ù¼Ò ¹®Á¦°¡ ÀÖ½À´Ï´Ù. ¸µÅ©°¡ ÆäÀÌÁö Áß¾Ó¿¡ Àִµ¥, ¾È³»Ã¢ÀÌ ÆäÀÌÁö Àý¹Ýº¸´Ù Å©´Ù¸é À̵¿¸·´ë¸¦ ²ø¾î¿Å°Ü¾ß ¾È³»Ã¢À» ´Ù º¼ ¼ö ÀÖ½À´Ï´Ù. ÀÌ ¶§´Â ÆäÀÌÁö Áß¾Ó¿¡ À§Ä¡½ÃŰ´Â °ÍÀÌ ÁÁ½À´Ï´Ù. ºñ·Ï ¸µÅ©¸¦ µ¤¾î¹ö¸®Áö¸¸, ÆäÀÌÁö¿¡¼­ °¡Àå Áß¾Ó¿¡ ¿À´Â°ÍÀÌ ÇÑ´«¿¡ º¸±â°¡ ÁÁ±â ¶§¹®ÀÔ´Ï´Ù. ¶Ç´Â ¸µÅ©°¡ º¸ÀÌ´Â ÆäÀÌÁöÀÇ ¸Ç¾Æ·¡¿¡ Àִµ¥, À§ÀÇ Äڵ带 »ç¿ëÇϸé À̵¿¸·´ë(scrollbar)¸¦ »ç¿ëÇØ¾ß ÇÕ´Ï´Ù. ÀÌ ¶§´Â ¾È³»Ã¢À» ¸µÅ© À§¿¡ ¿Àµµ·Ï Çϴ°ÍÀÌ ÇÑ´«¿¡ º¼ ¼ö ÀÖ½À´Ï´Ù.

±×¸®°í, nn4¿¡¼­ ·¹À̾ À̵¿½Ã ÁÖÀÇÇØ¾ßÇÒ Á¡ÀÌ ÀÖ½À´Ï´Ù.

ie4´Â ÆäÀÌÁö¸¦ óÀ½ Ãâ·ÂÇÒ ¶§¿Í ·¹À̾ À̵¿ÇßÀ» ¶§ À̵¿ÇÑ ¸¸Å­ÀÇ À§Ä¡¸¸Å­ À̵¿¸·´ë°¡ °»½ÅÀÌ µÇÁö¸¸, nn4´Â óÀ½ Çѹø Ãâ·ÂÇÒ ¶§¸¸ ÆäÀÌÁöÀÇ Å©±â¸¦ º¼ ¼ö ÀÖ´Â À̵¿¸·´ë°¡ »ý±é´Ï´Ù. ±×·¡¼­, ·¹À̾ À̵¿¸·´ë·Î ¿òÁ÷¿©¼­ º¼ ¼ö Àִ óÀ½ Ãâ·Â½ÃÀÇ ÆäÀÌÁö Å©±âº¸´Ù Å« ÁÂÇ¥·Î À̵¿½ÃŰ¸é ÆäÀÌÁö Å©±â¸¦ ¹þ¾î³­ ºÎºÐÀº º¼ ¼ö°¡ ¾ø½À´Ï´Ù. nn4ÀÇ ÀÌ ¹®Á¦¸¦ ÇØ°áÇϱâ À§ÇØ ÆäÀÌÁöÀÇ °¡Àå ¾Æ·¡¿¡ °¡Àå Å« ¾È³»Ã¢ÀÇ Å©±â ¸¸Å­ÀÇ ºó table¸¦ ³Ö¾îÁÖ¸é ¹þ¾î³­ ºÎºÐÀº »ý±âÁö ¾ÊÁö¸¸, ±× ¸¸Å­ ÆäÀÌÁö°¡ ºó ÆäÀÌÁö·Î ³²½À´Ï´Ù. ÀÌ»óÇÑ ÆäÀÌÁö°¡ µË´Ï´Ù.

±×·¡¼­, ¾È³»Ã¢À» º¸¿©ÁÙ ¶§ ÁÖÀÇÇØ¾ß ÇÒ Á¡ÀÌ Å©°Ô µÎ°¡ÁöÀÔ´Ï´Ù. ¸µÅ©À§Ä¡¿Í ¾È³»Ã¢ÀÇ À§Ä¡, nn4¿¡¼­ Àüü ¹®¼­ ¿ÜºÎ·Î ¾È³»Ã¢ º¸³»Áö ¾Ê±â¸¦ µé ¼ö ÀÖ½À´Ï´Ù.

--
nn4¿¡¼­ border¸¦ ÁöÁ¤ÇÑ css element°¡ ¸¹À» ¶§ ´Ù¿îµÇ´Â °æ¿ì°¡ ¸¹½À´Ï´Ù. ·¹À̾îÀÇ border´Â ÇÇÇØ¾ß °Ú½À´Ï´Ù. ·¹À̾î¿Í tableÀº ¹®Á¦°¡ ¾ø½À´Ï´Ù. tableÀÇ border·Î ·¹À̾î borderÀÇ È¿°ú¸¦ ³»¾ß°Ú½À´Ï´Ù.

¾È³»Ã¢ À§Ä¡½Ã۱â 2

close



¾È³»Ã¢À» ¿­¾ú½À´Ï´Ù.

¿À¸¥ÂÊ À§ÀÇ close¸¦ ´©¸£¸é âÀ» ´Ý½À´Ï´Ù.
 


TOP