버튼을 클릭하면 특정 이미지를 다른 이미지로 변경시킬 수 있다.
이는 동적인 작업으로 자바스크립트를 이용하면 좋다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>버튼 클릭하면 이미지 변경 하기</title>
<style type="text/css">
img {width: 300px;}
</style>
<script>
function changeImg() {
var img1 = document.getElementById("img1");
}
</script>
</head>
<body>
<img src="images/1.jpg" id="img1">
<img src="images/2.jpg" id="img2">
<input type="button" value="이미지 변경하기" onclick="changeImg()">
</body>
</html>
|
이미지에 각 id값을 주고 '이미지 변경하기' 버튼을 클릭하면 함수 changeImg를 호출한다.
img1인 이미지의 src 정보를 경로 "images/2.jpg"로 바꾼다는 내용이다..
클릭할 때 매다 반복적으로 이미지를 변경하고 싶다면 아래처럼 하면 된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>버튼 클릭하면 이미지 변경 하기 - 토글</title>
<style type="text/css">
img {width: 300px;}
</style>
<script>
var cnt = 1; // 전역 변수.
function imgToggle() {
var img1 = document.getElementById("img1");
var img = document.getElementById("img2");
if(cnt%2==1){
} else {
}
cnt++; // cnt 변수 1씩 증가 시키기
}
</script>
</head>
<body>
<img src="images/1.jpg" id="img1">
<img src="images/2.jpg" id="img2">
<input type="button" value="이미지 토글" onclick="imgToggle()">
</body>
</html>
|
'IT기술 > javascript' 카테고리의 다른 글
| [jquery] 플로팅 배너 자동으로 따라다니는 jQuery 소스 (0) | 2018.10.06 |
|---|---|
| SELECT BOX 선택시 내용을 텍스트박스에 출력하기 (0) | 2018.10.06 |
| Cannot read property 'getElementsByTagName' of null 오류 (0) | 2018.10.06 |
| 테이블 행 추가, 열 추가 (0) | 2018.10.06 |
| 자바스크립트 이벤트 루프 강의 (0) | 2018.10.06 |