📂프로그래밍

자바스크립트로 여러 이미지 토글 기능 구현하는 예제

쇼케이스

A B C D

토글은 두 가지 이상의 상태 또는 옵션 사이를 전환할 수 있는 기능을 말한다¹. 위 예제에서 버튼을 누르면 이미지가 다음과 같이 변경되는 것을 알 수 있다:

• A: 피카츄
• B: 이상해씨
• C: 파이리
• D: 꼬부기

코드

HTML

<button onclick="toggle_A()">A</button>
<button onclick="toggle_B()">B</button>
<button onclick="toggle_C()">C</button>
<button onclick="toggle_D()">D</button>

<img id="img" src="A.webp" width="280px" frameborder="0"></img>

• button onclick="toggle_*()": 버튼에 반응해줄 자바스크립트 함수를 지정한다.
• img id="img" src="A.webp": 자바스크립트에 의해서 변경될 이미지의 아이디를 지정한다. 여기서 src="A.webp"는 아무것도 선택되지 않았을 때 A.webp를 기본 이미지로 사용하겠다는 뜻이다.

javascript

<script>
function toggle_A() {document.getElementById("img").src = "A.webp";}
function toggle_B() {document.getElementById("img").src = "B.webp";}
function toggle_C() {document.getElementById("img").src = "C.webp";}
function toggle_D() {document.getElementById("img").src = "D.webp";}
</script>

• getElementById("img").src = "A.webp": id가 “img"인 요소의 src 속성을 “A.webp"로 변경한다. 즉, 버튼을 클릭하면 이미지가 해당하는 파일로 바뀐다.