11주차 - jsp&js (22) onmouseup/onmousedown 으로 이미지를 바꿔보자
2022. 9. 19. 20:59ㆍjsp/java script
이번의 목표
01. onmousup/onmousedown 을 이용하여 이미지를 바꿔보자.
지난 시간엔 onmouseup/onmousdown으로 글을 바꾸는 것을 해봤습니다.
이번엔 이미지를 바꾸는 것을 해보겠습니다.
이미지는 임의로 하셔도 좋습니다.
01. 코드
02. 실행 화면
01. 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex22</title>
<script type="text/javascript">
function turnon(obj) {
obj.src = "/jsExam/images/lightoff.png"
}
function turnoff(obj) {
obj.src = "/jsExam/images/lighton.png"
}
</script>
</head>
<body>
<img alt="" src="/jsExam/images/lightoff.png" onmouseup="turnon(this)" onmousedown="turnoff(this)" height="400px;" width="200px;"><br>
Click mouse and hold down!
</body>
</html>02. 실행 화면
① 클릭을 하지 않고 있는 상태와 클릭하고 있을 때의 이미지가 다른 것을 확인할 수 있습니다.
'jsp > java script' 카테고리의 다른 글
| 11주차 - jsp&js (24) confirm() (2) | 2022.09.21 |
|---|---|
| 11주차 - jsp&js (23) window.history.forward() / window.history.back() (0) | 2022.09.19 |
| 11주차 - jsp&js (21) onmousedown/onmouseup 으로 값을 바꿔보자 (0) | 2022.09.19 |
| 11주차 - jsp&js (20) <div>와 <span>에 onmouseover/onmouseout 사용해보자. (0) | 2022.09.19 |
| 11주차 - jsp&js (19) onmouseover/onmouseout, onmouseenter/onmouseleave (0) | 2022.09.19 |