11주차 - jsp&js (16) onclick으로 이미지를 변경하기
2022. 9. 19. 18:10ㆍjsp/java script
이번의 목표
01. onclick 이벤트를 사용하여 <img> 의 src를 변경해보자.
지난 시간까지는 <input>, <span>, <p> 등의 태그의 출력값을 바꾸는 것을 연습했습니다.
이번에는 이벤트를 활용하여 이미지를 클릭했을 때, 이미지가 변경되는 것을 연습해보겠습니다.
<img> 태그는 텍스트가 없고 src 속성을 이용해 이미지의 주소를 받아와서 출력합니다.
때문에 이미지를 바꾸기 위해서는 src 속성을 변경할 이미지의 주소로 변경해주어야 합니다.
예제로 사용할 이미지는 임의로 아무거나 사용하셔도 좋습니다.
01. 코드
02. 실행 화면
01. 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex16</title>
<script type="text/javascript">
function change(okObj){
okObj.src="images/delete.png"
}
</script>
</head>
<body>
<!-- 이미지를 클릭하면 delete.png 로 변경하기 -->
<img alt="" src="images/ok.png" onclick="change(this)" id="ok">
</body>
</html>02. 실행 화면
① 이미지를 클릭하기 전의 이미지
② 이미지를 클릭한 후의 이미지
'jsp > java script' 카테고리의 다른 글
| 11주차 - jsp&js (18) 폰트 스타일을 변경해보자. (0) | 2022.09.19 |
|---|---|
| 11주차 - jsp&js (17) onchange (0) | 2022.09.19 |
| 11주차 - jsp (15) onBlur (0) | 2022.09.19 |
| 11주차 - jsp&js (14) getElementById() 객체의 요소에 접근하기 - 2 (0) | 2022.09.16 |
| 11주차 - jsp&js (13) getElementById() 객체의 요소에 접근하기 - 1 (0) | 2022.09.16 |