마우스 over & out 이벤트 처리 방법이다. 마우스가 올려지면 그림이 보여지고 다시 마우스를 치우면 그림이 없어진다.
| 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="#" onMouseover="return show();" onMouseout="return hide()">마우스를 올려보시오</a>'+
'';
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> | | |
|
| 설명 | 마우스 온 이벤트처리 방법과 마우스 아웃 이벤트 처리방법과 아주 똑같은 방법이다. 단지 그림을 없애고 다시 나타나게 하는데 dhtml을 이용하여 레이어를 이용한다는 것이다.
마우스를 올려보시오 하는 곳에 onMouseover 이벤트와 onMouseout 이벤트에 대한 각각의 함수 호출부분을 살펴보면
마우스온시 그림 보여지게 하기 showLayer()함수실행, 마우스아웃시 그림 감추게 하는 hideLayer()함수 실행.
너무 쉽다...
|
|
|
|
