이제 레이어를 생성할 줄 안다고 가정하고 만든 레이어를 원하는 곳에서 원하는 곳으로 한번 움직여 보자. 일단 레이어를 움직이려면 DHTML 만 가지고는 어렵다. 따라서 유용하게 사용할 수 있는 자바스크립트를 연동시킨다. 어? 난 자바스크립트 잘 몰라요.. 하시는 사람 걱정 말라. 설명하는 나도 잘 모른다. 하지만 제일 처음 우리가 다운받은 파일 cbdhtml.js 에는 이런 기능을 가진 함수를 선언하고 있다. 다행이도 이 함수사용법만 알면 우리가 생성한 레이어를 원하는 곳으로 움직일 수 있다.
| 레이어를 움직이게 하는 함수 | 레이어를 움직이게 하는 함수 - 좀 더 정확하게 이야기 하면 레이어를 슬라이드 시키는 함수는 다음과 같다.
slideLayer(name,x,y,speed);
여기서 name 은 우리가 생성한 레이어의 이름과 같다. 여러 레이어를 생성하였다면 각각의 레이어는 이름을 가지고 있으므로 슬라이드를 원하는 레이어를 선택하여 슬라이드 시킬 수 있다는 이야기다. x와 y는 앞에서 설명했던 left와 top 의 개념이다. left는 왼쪽에서 얼마나 떨어뜨려 위치시킬것인가를 결정하였지만 이곳에서는 같은 개념으로 왼쪽에서 오른쪽을 x라 생각하고 원하는 x좌표를 결국 왼쪽에서 얼마나 떨어 뜨릴가를 결정하는거와 같아지게 되기 때문이다. top 은 y 로 생각해서 x-y 좌표계를 생각하면 더욱 쉬울것이다. 앞으로 x-y 좌표계를 이용하여 설명하도록 하자. 마지막으로 speed는 슬라이드 시키는 속도를 말한다. 속도의 크기는 데모를 통해 한번 알아보도록 하고 일단 함수를 적용시키는 방법을 알아보자. |
|
| 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">
var test="test";
content='<img src=../../dhtml/img/title.gif border=0>';
createLayer(test,25,25,468,60,1,content);
slideLayer(test,25,325,100);
</script>
</body>
</html>
| | |
|
|
|
