마우스를 누르면 브라우저의 상단에서 그림이 내려온다. 그리고 다시 그림을 누르면 그림은 올라가는 방법을 알아보도록 하자. 이 방법은 여러곳에 응용가능하다. 메뉴바를 이런식으로 꾸미면 원하는 메뉴를 멋지게 보여줄 수 있다.
| 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 click_txt(){
slideLayer(img,7,0,200);
return true;
}
function click_img(){
slideLayer(img,7,-100,200);
return true;
}
</script>
<script language="JavaScript1.2">
var text="text";
content='<font size=2><a href="#" onClick="return click_txt();">요길누르면 그림이 나옴</a></font>';
createLayer(text,7,7,300,40,1,content);
var img="img";
content='<a href="#" onClick="return click_img();"><img src=../img/data01.gif border=0></a>';
createLayer(img,7,-100,428,100,1,content);
</script>
</body>
</html> | | |
|
| 설명 | [11]번에서 했던 내용과 유사하다. 단지 다른점이 있다면 먼저 글자레이어를 만들고 글자를 클릭하였을시 onClick 이벤트 처리를 이미지레이어를 슬라이드 시켜 아래로 내려오게 하는것이다. 내려온 이미지를 눌렸을때 의 onClick 이벤트처리는 이미지를 다시 원래의 이미지 레이어 위치로 올려보내는 작업을 수행한다.
물론 이 아이디어는 여러가지로 응용될수 있다. 글자 레이어 대신 그림으로 써도 된다. 즉 메뉴그림을 하나 만들어 메뉴를 누르면 위에서든 옆에서든 아무튼 안보이게 감추었던 그림을 보여지게하고 보여준 새로운 메뉴를 누르면 다시 없어지게 하는 방법이다.
여기서 포인트는 그림레이어의 초기 위치이다. 소스를 보면 그림레이어의 위치가 x=7,y=-65를 가진다. (-)는 0을 기준으로 반대방향을 의미한다. 즉 y는 위에서의 거리이므로 반대의 의미는 위에서 내려오지 않고 올라간 자라에 위치한다는 것이다. 물론 x=-50 이런식으로 반대의 위치에 적용시킬수 있다.
이 기법은 레이어를 보이지않게 하는 기법과 유사한데 레이어를 보이게 하지만 화면에서는 보이게 하지 않는다는 것이다. 그림의 넓이와 높이를 먼저 알고 그 에 합당한 그림레이어의 위치를 잡으면 마치 화면상에는 존재하지 않는것 같은 효과를 부여할 수 있다. 중요한 아이디어이다. (적으라...) |
|
|
|
