<!--1. 아래의 스크립트를 <HEAD></HEAD>사이에 복사해 넣으세요-->
<STYLE TYPE="text/css">
<!--
td.info { font-size:11pt
}
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
// 페이지 로딩시 맨처음에 레이어에 나타날 메세지
var origMsg = '<H4>레이어 바꾸기</H4><P>이 메세지는 페이지 로딩시 맨처음에 나타납니다</P>'
// 마우스를 대었다가, 마우스를 아웃시켰을때 나타날 메세지
var dfltMsg = "마우스를 링크에 대었다가 떼면 이 메세지가 나타납니다."
function showInfo(txt) {
// td 태그에서 사용하는 'info' class 는 위의 스타일시트에서 스타일을 정의했습니다
// 네츠케이프에선 무시합니다
var info = '<TABLE WIDTH="280" CELLPADDING="4" BORDER="0"><TR><TD class="info" VALIGN="top">' + txt + '</TD></TR></TABLE>'
// 레이어 객체를 체크합니다. (NS 와 IE)
if (document.layers) {
document.info.document.write(info)
document.info.document.close()
}
if (document.all) {
document.all.info.innerHTML = info
}
}
//-->
</SCRIPT>
</HEAD>
<!--2. <BODY> 태그내에 onload="" 혹은 onunload 부분이 있으면 복사해 넣으세요-->
<BODY BGCOLOR="#FFFFFF" ONLOAD="showInfo(origMsg)">
<!--3. <BODY></BODY> 부분에 아래의 스크립트를 복사해 넣으세요-->
<DIV ID="info" STYLE="position:absolute; left:310; top:110; width:280; height:300; clip: rect(0 280 300 0); background-color:lightyellow; layer-background-color:lightyellow"></DIV>
<!--메세지를 나타낼 레이어 입니다-->
<P>링크 클릭으로 레이어 내용 바꾸기</P>
<!-- 상태바에 나타낼 메세지를 첫번째 링크에서 설정하였습니다-->
<UL>
<LI><A HREF="#" ONCLICK="showInfo('첫번째링크를 클릭하니 이 내용이 나오는군요')" ONMOUSEOVER="window.status='상태바에 나타나는 메세지 입니다'; return true" ONMOUSEOUT="window.status=''">Link 1</A></LI>
<!--return true 는 마우스를 링크에 대었을때 나타나는 윈도우의 기본행동(URL 보여주기)를 방지합니다 -->
<LI><A HREF="#" ONCLICK="showInfo('두번째 링크 메세지')">Link 2</A></LI>
<LI><A HREF="#" ONCLICK="showInfo('세번째 링크 메세지')">Link 3</A></LI>
</UL>
<P>마우스 오버로 레이어 내용 바꾸기</P>
<UL>
<LI><A HREF="#" ONMOUSEOVER="showInfo('<img src=http://www.javascript.co.kr/banners/ban_80_50.gif>')" ONMOUSEOUT="showInfo(dfltMsg)">Link 1</A></LI>
<LI><A HREF="#" ONMOUSEOVER="showInfo('두번째 링크')" ONMOUSEOUT="showInfo(dfltMsg)">Link 2</A></LI>
<LI><A HREF="#" ONMOUSEOVER="showInfo('세번째 링크')" ONMOUSEOUT="showInfo(dfltMsg)">Link 3</A></LI>
</UL>