1.
onMouseDown
onMouseUp
onMouseOver
onMouseOut
방법1
<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>
<br><br>
방법2
이미지의 name을 가져와서 document.box.src로 수정
<!-- 마우스 over/out 간단하게 하기 -->
<a href="#" onmouseover="document.box.src='images/surprise.gif'"
onmouseout="document.box.src='images/box.gif'">
<img alt="" src="images/box.gif" name="box">
</a>
예)
<table>
<col width="33%"><col width="33%"><col width="33%">
<tr>
<td>
<img alt="" src="./images/m_nature01.jpg"
onmouseover="this.src='./images/nature01.jpg'"
onmouseout="this.src='./images/m_nature01.jpg'">
</td>
<td>
<img alt="" src="./images/m_nature02.jpg"
onmouseover="this.src='./images/nature02.jpg'"
onmouseout="this.src='./images/m_nature02.jpg'">
</td>
<td>
<img alt="" src="./images/m_nature03.jpg"
onmouseover="this.src='./images/nature03.jpg'"
onmouseout="this.src='./images/m_nature03.jpg'">
</td>
</tr>
<tr>
<td>
<img alt="" src="./images/m_nature04.jpg"
onmouseover="this.src='./images/nature04.jpg'"
onmouseout="this.src='./images/m_nature04.jpg'">
</td>
<td>
<img alt="" src="./images/m_nature05.jpg"
onmouseover="this.src='./images/nature05.jpg'"
onmouseout="this.src='./images/m_nature05.jpg'">
</td>
<td>
<img alt="" src="./images/m_nature06.jpg"
onmouseover="this.src='./images/nature06.jpg'"
onmouseout="this.src='./images/m_nature06.jpg'">
</td>
</tr>
</table>
2.
<!-- onblur : 포커스 이동
텍스트창에 입력하다가 마우스 이동을하면 경고창이 뜸 -->
<body>
나이 : <input type="text" onblur="isRegNum()" size="10" maxlength="2"> 세 <br>
<br>
<script type="text/javascript">
function isRegNum() {
alert("onblur 실행");
}
</script>
3.
<!-- onchange : 입력값이 바뀌고 마우스가 다른곳을 클릭 했을 때// select형식 -->
우편번호 입력란
T : <input type="text" size="5" maxlength="3" onchange="isPostNum(this)">
<!-- this는 input을 가르쳐서 obj를 통째로 넘겨줄 수 있음 -->
-
<input type="text" size="5" maxlength="3" onchange="isPostNum(this)">
<br>
<select onchange="changeVal()">
<option>바나나</option>
<option>사과</option>
<option>배</option>
</select>
</script>
<br><br>
//select에서 옵션을 변경할 경우 알림창이 뜸
function changeVal() {
alert('changeVal 호출');
}
숫자가 아닌 문자가 포함됐을 경우를 체크할때
<script type="text/javascript">
function isPostNum(obj) {
let str = obj.value;
//alert(str);
//숫자가 아닌 문자가 포함됐을 경우를 체크할때
if (str.match(/[^0-9]/g)) {//숫자가 아닌 문자가 포함되어 있는 경우 true;
alert('숫자가 아닌 문자가 포함되어 있습니다');
}
}
'Java Script' 카테고리의 다른 글
| 자동으로 스크롤바 내려가게 하기 (0) | 2020.07.10 |
|---|---|
| DOM//Child nod (0) | 2020.07.10 |
| 문자열 아스키코드값으로 받기 (0) | 2020.07.10 |
| select에서 옵션을 변경할 경우 알림창 설정하기 (0) | 2020.07.10 |
| 숫자가 아닌 문자가 포함되어 있습니다 (0) | 2020.07.10 |
