마우스를 눌러 이미 생성된 레이어를 보이도록 하거나 안보이도록 하는 방법을 알아보자. 레이어를 만들때 우리는 레이어의 보이기,안보이기를 배웠다. 따라서, 자바 스크립트를 이용해서 마우스이벤트 발생시 각각에 해당하는 함수를 사용하면 간단하다.
| 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 show(){
showLayer(img);
return true;
}
function hide(){
hideLayer(img);
return true;
}
</script>
<script language="JavaScript1.2">
var text="text";
content='<font size=2>'+
'<a href="#" onClick="return show();">나타남</a>'+
'<br>'+
'<a href="#" onClick="return hide();">없어짐</a>'+
'</font>';
createLayer(text,7,7,300,40,1,content);
var img="img";
content='<img src=../img/title_dhtml.gif border=0>';
createLayer(img,200,7,468,60,0,content);
</script>
</body>
</html> | | 적용결과 |
|
| 설명 | 별로 어렵지는 않을것이다. 하지만 초보자라면 꽤 당황할지도 모르겠다. 천천히 살펴보자.
여기서 포인트는 마우스클릭시 발생하는 이벤트(onClick)을 처리하는 과정이다. 이 부분은 자바스크립트를 이용하여 이벤트를 처리하는 과정을 이해하면 다른 부분은 특별한것이 없으며 응용하면 많은 곳에 쓰일 수 있다.
이벤트처리하기 - 마우스를 클릭하면 발생하는 이벤트를 처리하는 부분은 다음과 같다.
<a href="#" onClick="return show();">나타남</a>
<a href="보여줄문서">클릭</a> 태그는 아는 부분이다. 그냥 html문법으로 문서연결하기 태그이다. 여기서 마우스 클릭을 처리하는 부분이 onClick="return show()" 부분이다. 즉 마우스 클릭시 show()라는 함수를 호출한다는 개념이다.
show()함수는 무엇인가? - 이건 당신이 원하는 이름으로 만들 수 있는 부분이다. 꼭 이름을 show()라고 하지 않아도 된다. 예를 들어 a(), b()라고 해도 상관없다는 이야기다. 하지만 중요한건 이런 함수를 사용하려면 반드시 선행해서 정의 되어 있어야 한다. 이 함수가 정의된 부분은 어디에 있는가?
레이어를 생성하기 전에 선언되어 있음을 확인 할 수 있다.
<script language="JavaScript1.2">
function show(){
showLayer(img);
return true;
}
function hide(){
hideLayer(img);
return true;
}
</script>
function show() { show함수의 내용 } 에서 선언되어 있다. 그 내용을 보면 showLayer(img)라는 부분만 있다. 즉 img라는 이름을 가진 레이어를 보여주는 것이다. 반대로 hide()함수는 hideLayer(img)라는 부분에서 img라는 이름을 가진 레이어를 감추는 함수를 이용한다.
이해가 되었기를 희망한다. |
|
|
|
