[HTML+CSS+JavaScript] 이미지 동적으로 변경하기 - 버튼 클릭 방법
HTML에서 버튼을 클릭했을 때 이미지를 동적으로 변경하려면 JavaScript를 사용하여 이미지의 src 속성을 업데이트하면 됩니다.
|
1. 예제 html 문서
bg01.jpg
0.29MB
bg02.jpg
0.50MB
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.container {
width: 500px;
height: 500px;
text-align: center;
}
#img {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<img id="img" src="bg01.jpg" />
<br />
<button>이미지 변경하기</button>
</div>
</body>
</html>>>> 결과 <<<
2. Button를 클릭하면 이미지 변경하기
1) javascript 함수를 생성합니다.
이미지를 바꾸는 기능을 수행하는 함수를 생성합니다.
<script>
// changeImg 함수는 img 요소의 이미지를 변경합니다.
function changeImg() {
// img 요소를 id로 가져옵니다.
var img = document.getElementById("img");
// img 요소의 src 속성을 "bg02.jpg"로 변경합니다.
img.src = "bg02.jpg";
}
</script>2) 이벤트 핸들러와 함수 연결
button의 onclick 이벤트 핸들러에 changeImg() 함수를 전달해 주면 됩니다.
<button onclick="changeImg()">이미지 변경하기</button>
3) 전체 소스보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.container {
width: 500px;
height: 500px;
text-align: center;
}
#img {
width: 300px;
height: 300px;
}
</style>
<script>
// changeImg 함수는 img 요소의 이미지를 변경합니다.
function changeImg() {
// img 요소를 id로 가져옵니다.
var img = document.getElementById("img");
// img 요소의 src 속성을 "bg02.jpg"로 변경합니다.
img.src = "bg02.jpg";
}
</script>
</head>
<body>
<div class="container">
<img id="img" src="bg01.jpg" />
<br />
<button onclick="changeImg()">이미지 변경하기</button>
</div>
</body>
</html>>>> 결과 <<<
3. Button를 클릭하면 이미지 토글하기
버튼을 클릭할때마다 2개의 이미지가 번갈아 가면서 보이게 합니다.
javascript 함수를 다음과 같이 변경하면 됩니다.
<script>
// changeImg 함수는 img 요소의 이미지를 변경합니다.
function changeImg() {
// img 요소를 id로 가져옵니다.
var img = document.getElementById("img");
// img 요소의 src 속성이 "bg01.jpg"를 포함하고 있는지 확인합니다.
if (img.src.includes("bg01.jpg")) {
// "bg01.jpg"를 포함하고 있으면 "bg02.jpg"로 변경합니다.
img.src = "bg02.jpg";
} else {
// "bg01.jpg"를 포함하고 있지 않으면 "bg01.jpg"로 변경합니다.
img.src = "bg01.jpg";
}
}
</script>전체 소스입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.container {
width: 500px;
height: 500px;
text-align: center;
}
#img {
width: 300px;
height: 300px;
}
</style>
<script>
// changeImg 함수는 img 요소의 이미지를 변경합니다.
function changeImg() {
// img 요소를 id로 가져옵니다.
var img = document.getElementById("img");
// img 요소의 src 속성이 "bg01.jpg"를 포함하고 있는지 확인합니다.
if (img.src.includes("bg01.jpg")) {
// "bg01.jpg"를 포함하고 있으면 "bg02.jpg"로 변경합니다.
img.src = "bg02.jpg";
} else {
// "bg01.jpg"를 포함하고 있지 않으면 "bg01.jpg"로 변경합니다.
img.src = "bg01.jpg";
}
}
</script>
</head>
<body>
<div class="container">
<img id="img" src="bg01.jpg" />
<br />
<button onclick="changeImg()">이미지 변경하기</button>
</div>
</body>
</html>4. Button를 클릭하면 여러 이미지 순환하기
버튼을 클릭할때마다 여러개의 이미지가 번갈아 가면서 보이게 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.container {
width: 500px;
height: 500px;
text-align: center;
}
#img {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<img id="img" src="bg01.jpg" />
<br />
<button onclick="changeImg()">이미지 변경하기</button>
</div>
<script>
// script위치를 header태그에서 body태그 맨 아래로 이동합니다.
const img = document.getElementById("img");
// 이미지 배열
// 이미지를 추가하려면 배열에 이미지 파일명을 추가하면 됩니다.
const images = ["bg01.jpg", "bg02.jpg", "bg03.jpg"];
let currentIndex = 0;
function changeImg() {
// 다음 이미지로 이동, 나머지 연산자를 사용하여 순환
// 이미지 배열의 길이를 넘어가면 0으로 초기화
// 이렇게 하면 이미지 갯수에 상관없이 이미지가 순환하게 됩니다.
currentIndex = (currentIndex + 1) % images.length;
img.src = images[currentIndex];
}
</script>
</body>
</html>
'프로그래밍 > html+css+js' 카테고리의 다른 글
| [HTML+CSS+JavaScript] side bar(사이드바) 보이고 감추기 (4) | 2025.01.12 |
|---|---|
| [HTML+CSS+JavaScript] icon 클릭시 동적으로 변경하기 (1) | 2025.01.12 |
| [HTML+CSS+JavaScript] 구글 웹 폰트 사용하기 (0) | 2025.01.02 |
| [HTML+CSS] icon(아이콘)이 필요할 때 - XE Icon사용하기 (1) | 2025.01.01 |
| [HTML+CSS+JavaScript] icon(아이콘)이 필요할 때 - Font Awesome 사용하기 (1) | 2025.01.01 |