이제 레이어를 움직이는 방법은 아주 쉽게 할 수 있다. 그런데.... 약간의 편법을 이용하면 배경이미지로 사용한 그림도 마음대로 움직이게 할 수 있다.
| HTML Example | <html>
<head>
<title>Hellow Homepage - DHTML</title>
<script language="JavaScript1.2" src="cbdhtml.js">
</script>
</head>
<body bgcolor=blue>
<script language="JavaScript1.2">
var bg="bg";
content='<table border=0 width=30000 height=300>'+
'<tr><td background=../img/bg_fishs.gif>.</td></tr>'+
'</table>';
createLayer(bg,0,0,30000,300,1,content);
slideLayer(bg,-30000,0,100);
</script>
</body>
</html> |
| | |
|
| 설명 |
소스를 보면 알겠지만 아주 간단한 아이디어 하나로 마치 배경이 움직이는 것같은 착각에 빠지게 한다. 하지만 실제적으로 배경이 움직이는것이 아니다. 그럼 무엇이 움직이는 것일가?
바로 레이어가 움직이는 것이다. 여기서 트랙은 300*300 이라는 창을 띄우도록 하는데 있다. 스크롤바,상태바,메뉴바, (자바스크립트의 창띄우기 관련을 읽어보기 바람) 등 모든 옵션을 no로하고 새로운 창띄우기 문서연결방법을 이용하면 300*300 의 조그마한 창이 뜬다.
자 이제 배경을 만들자.
content의 내용을 보면 단지 테이블태그만을 이용했다는 것을 알 수 있다. 여기서 배경그림으로 bg_fishs.gif 라는 그림을 사용한다. 배경그림은 다음과 같다.
이런 그림을 테이블의 배경그림으로 쓰면 멋진 배경그림으로 이어진다. 그렇다면 테이블의 크기와 높이를 강제지정으로 아주 크게 만든다. content의 내용처럼 넓이 30000, 높이 300 로 정했다.
여기서 넓이가 아이디어이다. 높이는 그냥 창의 크기만큼만 정해주고 어짜피 옆에서 옆으로 그림을 흘릴생각이므로 높이는 별로 중요하지 않는다. 넓이를 저렇게 크게 잡아도 되나? 라는 의구심이 든다. 결론은 된다. 테이블의 크기를 얼마나 크게 잡아도 되는지 자세히는 모르지만 아무튼 30000 이라는 숫자를 써도 테이블은 만들어진다. 아주 신기하다.
이제 이렇게 만든 테이블을 즉 레이어를 옆으로 흘리면 된다. 어떻게? 간단하게 slideLayer(레이어이름)을 사용하면된다.
멋진 아이디어 아닌가? = 난 잔머리의 천재인거 같다. 그런데 단점이 있다.
저렇게 크게 잡은 테이블일지라도 시간이 지나면 레이어는 정한곳으로 간다. 그럼 그림은 더이상 흐리지 않는다. 우선 이 데모는 그게 단점이다. 또한
일정한 창을 띄워 문서를 로딩하지 않고 그냥 이렇게 문서를 작성하고 문서를 보면 조금 어색하고 밑에 스크롤바가 엄청 늘어지는 답답함을 느낄 수 있을 것이다.
자 어떻게 하면 이런 과정을 반복해서 보여줄수있을까? - 한번 곰곰히 생각해보자.
|
|
|
|
|
