마우스 오버시 이미지가 계속 커지게 하는 방법
이미지에 마우스를 올리면 이미지가 계속 커지게 하기 위해서는 자바 스크립트의 타이밍 이벤트 메소드를 사용한다. 타이밍 이벤트 메소드는 지정한 시간이 되면 반복적으로 함수를 호출할 수 있다. 타이밍 이벤트 메소드의 종류는 다음과 같다.
setTimeout("자바스크립트 함수", 밀리초)
매개변수로 지정한 밀리초후에 매개변수로 지정한 함수를 실행시키는 함수이다. 밀리초는 1000값이 1초를 말한다.
clearTimeout( setTimeout 변수 )
만약에 셋타임아웃 함수로 무한 루프를 돌릴 경우 clearTimeout() 함수를 호출하면 무한 루프가 종료된다.
타이밍 이벤트로 무한 카운터를 만들어 본 코드
<script type="tex/javascript">
var count = 0;
var timer;
function counter() {
document.getElementById("counter").value = count;
count = count + 1;
timer = setTimeout( "counter()", 1000 );
}
</script>
<input type="button" value="Start count" onclick="counter()"/>
<input type="text" id="counter"/>
counter 텍스트 입력폼에 계속 1씩 증가하는 것을 볼 수 있다. 이 카운터를 종료하기 위해서는 브라우저 창을 닫거나 타이머 이벤트를 종료해야 하는 코드를 작성해야 한다.
자바스크립트의 타이밍 이벤트를 사용하여 이미지를 계속 키우는 코드
<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-ｅquiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
<!--
var i = 0;
var w = 100;
var h = 180;
function moveover() {
document.getElementById('image').width=w;
document.getElementById('image').height=h;
w=w+1;
h=h+1;
timer = setTimeout("moveover()",100);
}
function moveback() {
document.getElementById('image').width="100";
document.getElementById('image').height="180";
w=100;
h=180;
clearTimeout(timer);
}
//-->
</script>
</head>
<body>
<img id="image" src="test.gif" onmouseover="moveover()" onmouseout="moveback()"/>
</body>
</html>
[참고] http://www.w3schools.com/js/js_timing.asp
'Java Script & DOM > HTML DOM' 카테고리의 다른 글
| HTML DOM(Document Object Model)이란? (0) | 2009.09.22 |
|---|---|
| WYSIWYG(위지윅) 에디터 제작 기초 (0) | 2009.08.25 |
| DHTML(Dynamic HTML) 이란 (0) | 2009.06.30 |
| 편집용 iframe창에 작성된 내용 textarea로 복사 방법 (0) | 2009.06.09 |
| 편집용 iframe창에 스타일 지정하는 방법 (0) | 2009.06.09 |