이미지를 클릭하면 다른 이미지로 변경되도록 만들어보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h2>room image</h2>
<img alt="이미지없음" src="./image/photo_a.jpg" id="pic">
<script type="text/javascript">
$(function () {
let num = 0;
$("#pic").click(function () {
if(num == 0) {
$(this).attr("src", "./image/photo_b.jpg");
num = 1;
}else {
$(this).attr("src", "./image/photo_a.jpg");
num = 0;
}
});
});
</script>
</body>
</html>실행결과
이미지 한 번 클릭 후 결과
if(num == 0) {
$(this).attr("src", "./image/photo_b.jpg");
num = 1;
}else {
$(this).attr("src", "./image/photo_a.jpg");
num = 0;
}
else 부분에 첫번 째 이미지 값을 줬기 때문에
한번 더 누르면 첫번 째 이미지로 돌아간다.
'IT > JSP + JQuery' 카테고리의 다른 글
| [JSP] 지시문 (0) | 2021.06.14 |
|---|---|
| [JSP] 정의, 특징, 구성요소 (2) | 2021.06.14 |
| [JQuery] 이미지 자동 삽입 및 삭제 (0) | 2021.06.10 |
| [JQuery] 속성 값 지정 -2 ( 이미지를 클릭하면 속성 값 취득하여 출력) (0) | 2021.06.10 |
| [JQuery] 필기 (0) | 2021.06.10 |
