[Html+JavaScript] mouse이벤트/ onmousedown/onmouseup/onmouseover/onmouseout

mouse이벤트

onmousedown : 마우스 포인터가 요소 안으로 들어올 때 (마우스 클릭 시)

onmouseup : 마우스 버튼을 올릴 때(클릭한 걸 뗄 때)

onmouseover : 마우스 포인터가 요소 안으로 들어올 때 (마우스 올려놨을 때)

onmouseout : 마우스 포인터가 요소 밖으로 나갈 때 (마우스 뜻을 때)

---

 

 

예제

<input type="image" src="images/san0.gif" 
					onmousedown="mouseDown(this)" 
					onmouseup="mouseUp(this)"
					onmouseover="mouseOver(this)"
					onmouseout="mouseOut(this)">
					
<script type="text/javascript">
function mouseDown(obj) { // 마우스 포인터가 요소안으로 들어올 때 (마우스 클릭시)
	obj.src = "images/san1.gif";
}
function mouseUp(obj) { // 마우스 버튼을 올릴 때(클릭한 걸 뗄 때)
	obj.src = "images/san0.gif";
}
function mouseOver(obj){ // 마우스 포인터가 요소안으로 들어올 때 (마우스 올려 놨을 때)
	obj.src = "images/san2.gif";
}
function mouseOut(obj){ // 마우스 포인터가 요소 밖으로 나갈 때 (마우스 땟을때)
	obj.src = "images/san0.gif";
}
</script>

 

설명

 input type을 img로 묶어 이벤트 발생 시마다 함수를 지정한다.

 이벤트가 발생할 경우 지정 함수로 이동하여 이미지를 바꿔준다.

---

onmouseover, onmouseout 사용예제

<a href="#" onmouseover="document.box.src='images/surprise.gif'" 
			onmouseout="document.box.src='images/box.gif'">
			<img alt="" src="images/box.gif" name="box">

 

설명

 마우스를 그림(요소) 안으로 올리면 onmouseover 이벤트가 발생하여 그림이 바뀌고

 마우스가 그림 밖으로 나가면 onmouseout 이벤트가 발생하여 원복이 된다.