본문 바로가기
정보창고/블로그 정보

HTML-마우스 Over&Out 이벤트 처리

풍란의 향기 2012. 2. 7. 21:43

'정보창고 > 블로그 정보' 카테고리의 다른 글

마우스 Over & Out 이벤트 처리
마우스 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()함수 실행.

너무 쉽다...

 

 

 
HTML-실시간으로 변하는 시계출력  (0) 2012.02.07
HTML-Script Example  (0) 2012.02.07
HTML-마우스클릭 그림Up&Down  (0) 2012.02.07
HTML-배경그림 고정시키기  (0) 2012.02.07
HTML-밑줄없는 링크 만들기  (0) 2012.02.07

'정보창고/블로그 정보' Related Articles

티스토리툴바