이제 조금 복잡한 응용방법을 살펴보자. 이 방법은 레이어의 속성. 위에 있는 레이어는 아래있는 레이어를 감춘다라는 속성을 이용하여 부분적으로 레이어를 숨기는 방법을 적용한 것이다. 부분 부분 보면 다 설명되었던 내용이다. 전체를 이해하기 전에 부분부분을 먼저 이해해야 겠다.
| HTML Example | <html>
<head>
<title>Hellow Homepage - DHTML</title>
<script language="JavaScript1.2" src="cbdhtml.js">
</script>
</head>
<body bgcolor=white>
<script language="JavaScript1.2">
function move1(){
hideLayer(fly);
moveLayer(fly,0,150);
showLayer(fly);
slideLayer(fly,290,0,200);
setTimeout('move2()',1000*5);
return true;
}
function move2(){
hideLayer(fly);
moveLayer(fly,0,60);
showLayer(fly);
slideLayer(fly,355,160,200);
setTimeout('move1()',1000*5);
return true;
}
</script>
<script language="JavaScript1.2">
var tb="tb";
content='<table border=0 width=290 height=140 cellpadding=0 cellspacing=0>'+
'<tr><td bgcolor=black><table border=0 width=100% cellpadding=1 cellspacing=1>'+
'<tr><td background=./img/18_bg.jpg><img src=../../img/blank.gif border=0 height=138></td></tr></table>'+
'</td></tr></table>';
createLayer(tb,74,67,290,142,1,content);
var tx="tx";
content='<font size=2 color=blue>Dynamic HTML Demo</font>';
createLayer(tx,80,67,150,30,1,content);
var fly="fly";
content='<img src=./img/18_01.gif border=0 width=74 height=67>';
createLayer(fly,0,150,74,67,1,content);
var cover1="cover1";
content='<table border=0 width=438 height=67 cellpadding=0 cellspacing=0><tr><td bgcolor=white>'+
'<img src=../../img/blank.gif border=0 height=67></td></tr></table>';
createLayer(cover1,0,0,438,67,1,content);
var cover2="cover2";
content='<table border=0 width=438 height=67 cellpadding=0 cellspacing=0><tr><td bgcolor=white>'+
'<img src=../../img/blank.gif border=0 height=67></td></tr></table>';
createLayer(cover2,0,210,438,67,1,content);
var cover3="cover3";
content='<table border=0 width=74 height=274 cellpadding=0 cellspacing=0><tr><td bgcolor=white>'+
'<img src=../../img/blank.gif border=0 height=274></td></tr></table>';
createLayer(cover3,0,0,74,274,1,content);
var cover4="cover4";
content='<table border=0 width=74 height=274 cellpadding=0 cellspacing=0><tr><td bgcolor=white>'+
'<img src=../../img/blank.gif border=0 height=274></td></tr></table>';
createLayer(cover4,364,0,74,274,1,content);
move1();
</script>
</body>
</html> |
| | |
|
| 설명 | 설명에 들어가기전에 사용된 이미지를 보자
밑에 그림은 배경이미지를 쓰기 위함이고 위에 그림은 슬라이딩 시켜 마치 비행기가 회전하면 날아가는 착각을 일으키도록 하기 위해 사용된 글미이다.
이번 데모에서 보여지는 것은 페이지의 일정한 부분에서만 비행기가 보여지게 하는데 아이디어가 있다.
원래 익스플로워에서는 <iframe> </iframe>이라는 태그를 사용하여 페이지의 일정한 부분만 원하는 문서의 내용으로 보여지게 할 수 있지만 네스케이프는 지원이 안된다 . 따라서 크로스브라우저 DHTML을 적용하기 위해 다음과 같이 조금은 억지같은 방법이지만 결과는 그런대로 쓸만하다.
우선 주의해야 할것은 html 소스에서 보면 레이어를 생성하는 부분에서 레이어가 처음 부터 쓰여지는것이 가장 바닥에 내려가는 성질이 있다는 것을 알아두는것이 중요하다 그러므로 처음 생성된 레이어는 다음에 생성된 레이어의 아래부분에 들어가는것이고 다음에 생성된 레이어는 이전에 생성된 레이어의 위로 올라가는 것이다.
여기서 또하나 중요한 것은 위에 있는 레이어가 투명이미지가 아니라면 밑에 있는 레이어는 위에 있는 레이어에 가린만큼이 안보인다는 것이다.
위의 예제에서 fly 레이어와 tb 레이어 생성순서를 바꾸어 보면 그런 사실을 알 수 있다. 이것이 중요한 아이디어이다.
사실 한 페이지에서 특정부분에서 특정 부분까지 슬라이드 시키는 것은 아주 쉽다. 하지만 예제처름 일정한 부분에서 나와 일정한 부분을 지나면 안보이게 하는 것은 상당히 어렵다. 그래서 다음과 같이 편법을 이용한다.
즉 보이고 싶지 않은 영역에 어떤 레이어를 만들어 그 위에 올려놓으면 레이어를 감출 수 있다는 아이디어이다. 그래서 여기서 사용된 비행기를 숨기기 위한 레이어가 바로 아무내용없이 하얀색을 보이도록하는 (배경색이 하얀색이므로 ) 테이블을 만들어 그 안에 투명이미지를 넣어 테이블의 넓이를 마음먹은 대로 만들어 보이고 싶지 않는 부분에 놓는것이다. 여기서 테이블의 생성에서 투명이미지를 만들어(1*1픽셀) 테이블의 넓이와 높이를 조절해야지만 네스케이프에서도 정상적인 모양을 얻을 수 있다.
만약 이 투명이미지를 생략하면 익스플로워는 잘 되는데 네스케이프는 마치 테이블이 없는것처럼 보인다.
자 이제 간추려보자..
테이블을 만들어 배경그림을 넣고 일정한 부분에 테이블을 위치시킨다.
그다음 비행기를 날려보자. 원하는 곳에서 원하는 곳까지 이 부분이 바로 함수부분이다.
소스 제일 아래 move1() 함수가 호출 되고 mover1()은 다시 mover2()함수를 일정시간 지난후 호출하고 move2()는 move1()을 호출하고 반복해서 비행기를 움직이도록 한다.
그 다음 우리가 원하는 영역 - 배경이 있는 테이블에서만 비행기가 날아다니도록 하기 위해 그 이외의 영역은 아무것도 없고 내용이 하얀색이 테이블을 위치 시킨다. 여기서는 위아래.양옆.4개의 커버레이어를 사용해서 배경이 있는 테이블이 외의 영역에서 비행기를 감추는 방법을 사용하고 있다.
역시 아이디어가 빛난다. = 역시 난 잔머리의 천재인거 같다.
유치한 생각이 멋진 효과를 부여하지 않는가?
자 이젠 어떤 유치한 생각으로 멋진 효과를 낼 수 있을 까?
|
|
|
|
|
