<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Input</title>
<script type="text/javascript">
function Test()
{
//C# 이벤트 핸들러 인자
//1. object sender : 이벤트 발생 객체
//2. EventArgs args : 이벤트 부가 정보
//Javascript
//1. event.srcElement
//2. event
//마우스 -> 좌표
//A. 문서의 좌측 상단이 기준(body)
//alert(event.x + " : " + event.y);
//B. 화면 기준.
//alert(event.screenX + " : " + event.screenY);
//C. 클릭이벤트가 발생하는 객체 기준(이미지)
alert(event.offsetX + " : " + event.offsetY);
//마우스 버튼의 종류
//alert(event.button);
}
function Test2()
{
//event.keyCode - 문자코드 반환
if (event.keyCode >= 48 && event.keyCode <= 57)
{
//현재 입력된 숫자의 문자코드를 반환
document.getElementById("label1").innerText += event.keyCode + "->";
}
else
{
//alert("NaN!!");
//행동 자체를 캔슬할떄 자주사용 주민번호 입력때 유용
event.returnValue = false;
}
}
</script>
</head>
<body oncontextmenu="event.returnValue=false;">
<h3>이미지</h3>
<img src="images/adore.png" width="250" border="1" onmousedown="Test();" />
<hr />
<input type="text" id="txt1" size="30" onkeydown="Test2();" />
<br />
<div id="label1"></div>
</body>
</html>
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>네이버~</title> <style
type="text/css"> #txtSearch { /* 이미지를 파일하나에서 보관해서 좌표로 접근하는 이유는 관리하는측면에서 파일일 많아지면 관리하기 힘들기 때문에 하나의 파일에서 좌표로
접근하며 속도도 훨씬 더빠르다. 서버에서 이미지를 캐쉬에저장 미투데이를 보여줘야할때 예전에 이미 캐쉬에 저장 되있기 때문에 다시 다운받아오지 않기 때문에 속도가 훨씬 빠르다. 서버나 클라이언트 입장에서 한개의 파일을 주고받는 것이 비용이 훨씬 저렴해
진다. */ border:7px solid lightgreen; width:300px; background-image:url(images/sp_fms.gif); background-repeat:no-repeat; background-position:center -20px; /* background-position:center
-40px; background-position:center
-60px; */ } </style> <script
type="text/javascript"> function Change() { var txt =
document.getElementById("txtSearch"); if (event.type ==
"focus") txt.style.backgroundImage = "url()"; else if (event.type == "blur") { if(txt.value.length
< 10) txt.style.backgroundImage = "url(images/sp_fms.gif)"; } } </script> </head> <body> <!-- C# : Enter 의 반대 Leave Javascript : onfocus, onblur --> <input
type="text"
id="txtSearch"
onfocus="Change();"
onblur="Change();"
/> </body> </html>
