이젠 시간에 따라 레이어를 컨트롤 해보자. 즉 원하는 시간후에 어떤 이벤트를 처리하도록 하는 방법을 알아보도록 하자. 이 방법은 자바스크립트의 몇초후에 다른 이벤트 발생 시키기를 응용한 방법이다.
| HTML Example | <html>
<head>
<title>Hellow Homepage - DHTML</title>
<script language="JavaScript1.2" src="cbdhtml.js">
</script>
</head>
<body bgcolor=black>
<!-- 함수를 지정하는곳 -->
<script language="JavaScript1.2">
function hideall(){
hideLayer(text1);
hideLayer(text2);
hideLayer(text3);
return true;
}
function show_text1(){
hideall();
showLayer(text1);
setTimeout('show_text2()',1000*2);
return true;
}
function show_text2(){
hideall();
showLayer(text2);
setTimeout('show_text3()',1000*2);
return true;
}
function show_text3(){
hideall();
showLayer(text3);
setTimeout('show_text1()',1000*2);
return true;
}
</script>
<!-- 레이어를 생성하는 곳 -->
<script language="JavaScript1.2">
var text1="text1";
content='<font size=2 color=white>2초후에 글자가 변합니다.이건 첫번째 멧세지 입니다.</font>';
createLayer(text1,40,40,400,20,0,content);
var text2="text2";
content='<font size=2 color=blue>2초후에 글자가 변합니다.이건 두번째 멧세지 입니다.</font>';
createLayer(text2,40,40,400,20,0,content);
var text3="text3";
content='<font size=2 color=#feb50c>2초후에 글자가 변합니다.이건 세번째 멧세지 입니다.</font>';
createLayer(text3,40,40,400,20,0,content);
<!-- 최초 실행되는 함수 -->
show_text1();
</script>
</body>
</html> |
| | |
|
| 설명 | 우선 아이디어를 살펴보면
1.글자를 시간별로 다르게 보여주고자한다.
2.보여줄 멧세지를 레이어로 생성한다.
3.각각의 멧세지는 안보이도록 설정한다.
4.제일 처음 첫번째 멧세지를 출력한다.
5.첫번째 멧세지가 출력되고 2초후에 자기자신은 감추로 2번째 멧세지를 출력한다.
6.두번째 멧세지가 출력되고 2초후에 자기자신은 감추고 3번째 멧세지를 출력한다.
7.세번째 멧세지가 출력되고 2초후에 다시 첫번째 멧세지를 출력한다.
이런 과정을 하기 위해서는 일정시간이 지난후 다른 함수를 호출하는 방법을 알양 한다. 그것은 다음과 같다.
setTimeout('원하는함수',1000*원하는초);
여기서는 처음에 show_text1()함수를 레이어 생성부분의 제일 마지막에 적었다. 따라서 제일 먼저 실행되는 함수는 show_text1()함수이다.
show_text1()함수를 보면 hideall()함수가 호출되고 그다음에 text1 레이어를 보여준다. hideall()함수는 모든 레이어를 안보이도록 해주도록 설정되어 있음을 쉽게 알 수 있다. show_text1()함수에서 레이어를 보여주고 setTimeout()를 이용하여 2초후에 show_text2()함수를 호출하는 것을 알 수 있다.
마찬가지로 show_text2()함수는 모든 레이어를 안보이도록 해주는 hideall()을 먼저 실행하고 그다음에 text2레이어를 보이도록 해주는 showLayer(text2)를 호출한다. 그다음에 역시 마찬가지로 3번째 멧세지를 보여지게 하는 show_text3()함수를 2초후에 setTimeout('show_text3()',1000*2); 를 이용하여 호출한다.
마지막으로 show_text3()함수는 위에서와 마찬가지로 실행되며 마지막에 show_tex1()함수를 호출하며 이것은 무한 루프로 계속 반복해서 레이어 1, 레이어 2, 레이어 3을 시간별로 호출 함을 알 수 있다.
각각의 show_text1,2,3()함수는 제일 먼저 hideall() 함수를 실행해서 모든 레이어를 감춘 상태에서 자신의 레이어를 보여준다는 기법도 기억 하기 바란다.
제일 처음부터 여기까지 이해가 되었다면 이젠 당신은 레이아웃의 천재가 될것이다.
|
|
|
|
|
