※ 이번 예제는 "강좌" ," 검색엔진" 에 마우스가 올가가면 감추어진 레이어를 보여주고
선택 버튼을 누르면 지정되어진 페이지로 이동을 하거나 배경 색을 바꾸는 예제입니다.
레이어 예제에서:
"onmouseover" 는 마우스가 올라갔을 때 자바스크립트를 호출하는 이벤트핸들러이고,
"onmouseout" 은 마우스가 벗어났을 때 자바스크립트를 호출하는 이벤트핸들러입니다.
그리고 "this" 는 자신을 지칭하는 함수인데, 예로
<div ID="menu1" onmouseover=this .style.visivility='visible' onmouseout=this .style.visivility='hidden''>
에서 this 는 id가 "menu"1인 "div 객체 자신" 을 가리킵니다.
이렇게 this 를 사용하면 짧은 명령어로 자신 객체에 접근을 할 수 있지만 다른 객체로의 접근은 불가능 합니다.
보이고 안보이고는 css 의 visibility 속성을 이용하는데 가능한 값은
visible : 보이기
hidden : 감추기
그리고 select 예제에서:
"onChange()" 는 선택항목에 변화가 있을 때 자바스크립트를 호출하는 이벤트핸들러입니다.
사용자가 선택한 항목을 구분해 내기 위해서 selectedIndex 라는 속성이 쓰이고 있습니다.
이는 변화된 순간의 선택된 항목 을 가리킵니다.
바탕색을 바꿔봐요
----
검정색
흰색
라임
옅은 노랑
옅은 파랑
베이지
----
야후
다음
학원홈
소스
<![CDATA[
<STYLE TYPE="TEXT/CSS">
#menu1 {position=relative;visibility=hidden;width=50}
#menu2 {position=relative;visibility=hidden;width=50}
</STYLE>
<script language=javascript>
<!--
function show_layer(my_boy) //레이어의 style의 display 속성을 바꾸는 함수
{
if(my_boy=="강좌")
{
menu2.style.visibility='hidden'
menu1.style.visibility='visible'
}
else if(my_boy=="검색엔진")
{
menu1.style.visibility='hidden'
menu2.style.visibility='visible'
}
}
function hide_layer(my_boy)
{
if(my_boy=="강좌")
{
menu1.style.visibility='hidden'
}
else if(my_boy=="검색엔진")
{
menu2.style.visibility='hidden'
}
}
-->
</script>
</HEAD>
<BODY BGCOLOR=WHITE>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td bgcolor=lightgrey><font size="2">
<A style="cursor=hand;font-size=12;border=1 black solid;padding-top=1;width=50;
filter:dropshadow(color=white,offx=1,offy=1,positive=1)"
id="lect"
onmouseover="show_layer('강좌');this.style.color='c1c3c4'"
onmouseout="this.style.color='black'"
>
 강 좌
</A>
</td>
<td> </td>
<td bgcolor=lightgrey>
<A style="cursor=hand;font-size=12;border=1 black solid;padding-top=1;width=50;
filter:dropshadow(color=white,offx=1,offy=1,positive=1)"
id="engine"
onmouseover="show_layer('검색엔진');this.style.color='c1c3c4'"
onmouseout="this.style.color='black'"
>
검색엔진
</a>
</td>
</tr>
<tr>
<td>
<!-- 아래는 감추어진 레이어 -->
<div ID="menu1" onMouseOut="hide_layer('강좌')" onmouseover="show_layer('강좌')">
<font size="2">
<a href="#" target="_blank">-html</a><br>
<a href="#" target="_blank">-java</a><br>
<a href="#" target="_blank">-아이콘</a></font>
</div>
</td>
<td> </td>
<td>
<div id="menu2" onMouseOut="hide_layer('검색엔진')" onmouseover="show_layer('검색엔진')">
<font size="2" color='teal'>
<a href="http://yahoo.co.kr" target="_blank">-야후</a><br>
<a href="http://empas.co.kr" target="_blank">-엠파스</a><br>
<a href="http://simmani.co.kr" target="_blank">-심마니</a></font>
</div>
<!-- ////////////// -->
</td>
</tr>
</table>
<hr><br>
바탕색을 바꿔봐요<br>
<select onChange="document.bgColor=this.options[selectedIndex].value">
<!-- 위에서 selectedIndex 는 옵션중에 사용자가선택한 항목을 가리킴-->
<option value="">----
<option value="black">검정색
<option value="white">흰색
<option value="lime">라임
<option value="lightyellow">옅은 노랑
<option value="lightblue">옅은 파랑
<option value="beige">베이지
</select>
<br><br>선택한 페이지로 이동해요<br>
<select onChange="document.location.href=this.options[selectedIndex].value">
<option value="">----
<option value="http://www.yahoo.co.kr">야후
<option value="http://www.daum.net">다음
<option value="http://www.webeng.co.kr">학원홈
</select>
</body>
</BODY>
</HTML>
]]>