동적으로 이미지를 변경하는 간단한 HTML 코드를 제공합니다. 이 코드는 두 개의 버튼을 사용하여 이미지를 변경하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>동적으로 이미지 변경</title>
</head>
<body>
<h1>동적으로 이미지 변경</h1>
<!-- 이미지 표시 영역 -->
<img id="image" src="image1.jpg" alt="이미지 1"><br><br>
<!-- 이미지 변경 버튼 -->
<button onclick="changeImage('image1.jpg')">이미지 1</button>
<button onclick="changeImage('image2.jpg')">이미지 2</button>
<button onclick="changeImage('image3.jpg')">이미지 3</button>
<script>
// 이미지 변경 함수
function changeImage(newImage) {
var imageElement = document.getElementById("image");
imageElement.src = newImage;
imageElement.alt = "새로운 이미지";
}
</script>
</body>
</html>
위 코드에서는 JavaScript 함수 changeImage를 사용하여 이미지의 src와 alt 속성을 변경합니다. 버튼을 클릭하면 해당 이미지로 변경됩니다.
결과보기
'HTML 예제' 카테고리의 다른 글
| 화면에 움직이는 객체 추가 (1) | 2023.12.08 |
|---|---|
| 간단한 블로그 형식 (1) | 2023.12.08 |
| 사용자 정보 입력 받기 (0) | 2023.12.07 |
| 텍스트 스타일링 연습 (0) | 2023.12.07 |
| 화면 스크롤 이벤트 (0) | 2023.12.07 |
