반응형
<h1>버튼 클릭 시 src변경해 이미지 변경하기</h1> <br><br>
<p>JavaScript를 통해 태그 속성 또한 변경이 가능합니다.</p> <br><br>
<p>태그의 src속성을 변경하여 다른 이미지를 불러올 수 있습니다. </p> <br><br>
<button onclick="document.getElementById('change_image').src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbOXZn9%2Fbtrq334nWjp%2FAAAAAAAAAAAAAAAAAAAAAKPIBe_KlPF7haDDuHEjZfWgf2E8bwBle-HHRyJyYwT7%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DSx6pMoBYy6dXBGfQwy94Q6kj%252B18%253D'">이미지 1 표시</button>
<button onclick="document.getElementById('change_image').src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FdZ8Wlj%2FbtrqX1Uh1Yb%2FAAAAAAAAAAAAAAAAAAAAAPoH0kwTbjC5S7J74WlpZITuTmOqzrPlEnfxHx7MEYIj%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3Db6CCmh3JRCpHn3HVAD1mZOhS6gw%253D'">이미지 2 표시</button> <br><br><br>
<img id="change_image"> 버튼 클릭 시 여기에 이미지가 표시됩니다. <br><br><br><br><br>
버튼 클릭 시 src변경해 이미지 변경하기
JavaScript를 통해 태그 속성 또한 변경이 가능합니다.
태그의 src속성을 변경하여 다른 이미지를 불러올 수 있습니다.
버튼 클릭 시 여기에 이미지가 표시됩니다.
728x90
반응형
'플그래밍 > 자바스킙' 카테고리의 다른 글
| [JavaScript 기초] 태그 없애기/보이기 (0) | 2022.12.03 |
|---|---|
| [JavaScript 기초] CSS STYLE 변경하기 (0) | 2022.12.03 |
| [JavaScript 기초] getElementById로 컨텐츠 바꾸기 (0) | 2022.12.03 |
| [JavaScript 기초] 현재 시간 조회 버튼 (0) | 2022.12.03 |
| [자바스큅] HTML Element의 컨텐츠 변경하기 (0) | 2022.03.04 |