onMouseDown | onMouseUp | onMOuseOver | onMouseOut
Language/JAVASCRIPT 2010. 5. 10. 15:18
mouse.htm
function over(ttitle, tcontent){
<html>
<head>
<title>onmouseover-onmouseout-onmousedown-onmouseup</title>
<Script-x LANGUAGE="JavaScript-x">
<!--
function over(ttitle, tcontent){
txttitleID = document.getElementById("txttitle")
txtcontentID = document.getElementById("txtcontent")
overtxtID = document.getElementById("overtxt")
txttitleID.innerHTML = ttitle
txtcontentID.innerHTML = tcontent
dragbool=true
document.onmousemove=move;
}
function out(){
overtxtID.style.visibility= "hidden";
dragbool=false;
}
function move(e){
if (navigator.vendor){
currentX = (e.pageX);
currentY = (e.pageY);
}else{
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
}
if (dragbool){
with(overtxtID.style){
left = currentX + 10;
top = currentY + 12;
visibility= "visible";
}
}
}
// -->
</Script-x>
<style>
<!--
span { font-weight:bold; font-size:18pt; color:white; background-color:black; }
-->
</style>
</head>
<body>
<p align="center"><span>onMouseOver-onMouseOut 이벤트</span><p>
<div id="overtxt" style="width:232px; height:168px; position:
<table border="1" cellspacing="0" width="100%" bordercolordark="white" bordercolorlight="black">
<tr>
<td width="190" bgcolor="#3333FF">
<p id="txttitle" style="color:white;"> </p>
</td>
</tr>
<tr>
<td width="190" bgcolor="#FFFFCC">
<p id="txtcontent"> </p>
</td>
</tr>
</table>
</div>
<a href="../data/lecture" onMouseOver="over('helpme119', 'helpme119로 이동합니다.'); " onmouseout="out();" >helpme119</a></p>
<p><a href="http://www.naver.com" onMouseOver="over('네이버', '네이버로 이동합니다.');" onmouseout="out();" >네이버</a></p>
<p><a href="http://www.zoo.co.kr" onMouseOver="over('동물원', '동물원으로 이동합니다.');" onmouseout="out();">
<img src="f_fish_red.gif" width="120" height="92" border="0"></a></p>
<hr>
<p align="center"><span>onMouseDown-onMouseUp 이벤트</span><p>
<p><img src="football03.gif" width="59" height="59" border="0" alt="football03.gif" onmousedown="this.src='basketball.gif';" onmouseup="this.src='football03.gif';" >
</p>
</body>
</html>
over 함수는 ttitle, tcontent라는 2개의 변수를 받는다.
txttitleID = document.getElementById("txttitle")
txttitle 개체를 인식해서 변수 txttitleID에 대입한다.
txtcontentID = document.getElementById("txtcontent")
txtcontent개체를 인식해서 변수 txtcontentID에 대입한다.
overtxtID = document.getElementById("overtxt")
overtxt 개체를 인식해서 변수 overtxtID에 대입한다.
txttitleID.innerHTML = ttitle
ttitle 변수에서 받은 값을 txttitleID 개체의 내부 텍스트로 쓴다. 이것이 정보 상자의 제목에 해당하는 것이다.
txtcontentID.innerHTML = tcontent
tcontent 변수에서 받은 값을 txtcontentID의 내부텍스트로 쓴다. 이것이 정보 상자의 내용에 해당하는 것이다.
dragbool=true
이제 mouseover 이벤트가 발생했음으로 이 개체에서 마우스의 이동에 따라 정보 상자도 따라서 이동시키기 위해 dragbool 변수에 true 값을 대입한다.
document.onmousemove=move;
정보 상자가 마우스를 이동시키도록 move 함수를 호출한다.
}
function out(){
마우스 포인터가 개체의 밖으로 이동했을 때 이 함수가 호출된다.
overtxtID.style.visibility= "hidden";
이제 정보 상자가 보이지 않게 한다.
dragbool=false;
이제 더 이상 정보 상자가 마우스 포인터를 따라 다니지 않게 dragbool 변수에 false를 대입한다.
}
function move(e){
이 함수는 변수 e를 통해 이벤트 개체를 받는데 이것은 netscape에서만 이용된다.
if (navigator.vendor){
netscpe6.x인 경우에 이 조건식에 속한 명령문이 실행된다.
currentX = (e.pageX);
이벤트 개체의 pageX 좌표를 변수 currentX에 대입한다.
currentY = (e.pageY);
이벤트 개체의 pageY 좌표를 변수 currentY에 대입한다.
}else{
그 밖의 경우 즉 explorer인 경우이다.
currentX = (event.clientX + document.body.scrollLeft);
event 개체의 clintX 좌표에 scrollLeft 속성을 더해서 변수 currentX에 대입한다. scrollLeft 속성은 웹 문서에 수평스크롤 막대가 생긴 경우에 그 거리 만큼을 더해주는 것이다. 수평스크롤 막대가 없는 경우에는 값이 0이다.
currentY = (event.clientY + document.body.scrollTop);
event 개체의 Y 좌표라는 점을 빼고는 currentX와 설명이 같다.
}
if (dragbool){
마우스 포인터가 링크 개체위로 올라가 mouseover 이벤트가 발생한 경우에 dragbool 변수의 값이 true이기 때문에 아래의 명령문이 실행된다. 마우스 포인터가 개체 밖으로 이동해 mouseout 이벤트가 발행한 경우에는 dragbool 변수가 false 값을 가지게 되어 아래의 명령문이 실행되지 않는다.
with(overtxtID.style){
left = currentX + 10;
top = currentY + 12;
visibility= "visible";
}
overtxtID 개체의 좌표를 이벤트의 좌표에서 오른쪽으로 10픽셀 아래쪽으로 12픽셀 이동시킨 좌표를 overtxtID 개체의 좌표로 대입한다 이렇게 함으로써 정보 상자가 마우스 포인터를 따라 다니는 것이다.
}
}
<a href="http://www.samgak.com" onMouseOver="over('삼각형', '삼각형 출판사로 이동합니다.');" onmouseout="out();" >삼각형</a>
<a href="http://www.naver.com" onMouseOver="over('네이버', '네이버로 이동합니다.');" onmouseout="out();" >네이버</a>
<a href="http://www.zoo.co.kr" onMouseOver="over('동물원', '동물원으로 이동합니다.');" onmouseout="out();"><img src="f_fish_red.gif" width="120" height="92" border="0"></a>
<img src="football03.gif" width="59" height="59" border="0" alt="football03.gif" onmousedown="this.src='basketball.gif';" onmouseup="this.src='football03.gif';" >
이 개체에서 마우스 버튼을 누르면 이 IMG 개체의 src 속성을 'basketball.gif'로 변경함으로써 농구공이 보이게 하고 놓으면 src 속성을 'football03.gif'로 변경함으로써 원래의 그림인 축구공이 보이게 한다.
'Language > JAVASCRIPT' 카테고리의 다른 글
| 이벤트 핸들러와 이벤트 (0) | 2010.05.10 |
|---|---|
| onClick | onDblClick | onFocus | onBlur (0) | 2010.05.10 |
| onMouseMove (0) | 2010.05.10 |
| onAbort | onReset | onSubmit (0) | 2010.05.10 |
| 키코드 (keyCode) (0) | 2010.05.10 |