반응형
html로 표현된 이미지를 변경하려면 정적인 html로는 변경이 어려우나
Javascript를 이용하면 간단하게 해결할 수 있습니다.
예제
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<div>이미지</div>
<img src="a.PNG">
</body>
</html>
위와 같이 화면에 하나의 이미지가 띄워져 있습니다.
이 이미지를 바꿔 보겠습니다.
document.getElementById("img태그id").src위의 스크립트를 이용하여 변경할 이미지 값을 할당하면 됩니다.
변경 소스
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function ChnImg(){
document.getElementById("imgId").src = "b.PNG";
}
</script>
</head>
<body>
<div onclick="ChnImg()">이미지</div>
<img id="imgId" src="a.PNG">
</body>
</html>1. img 태그에 아이디를 할당
2. div 태그에 클릭 이벤트 지정
3. div 클릭시 수행되는 펑션에 변경 로직 구현
div안에 포함되어 있는 글자 클릭시
위와 같이 이미지가 변경 됩니다.
반응형
'Dev > JavaScript' 카테고리의 다른 글
| [Javascript] 파일 업로드 용량 체크하기 로직 (0) | 2022.12.01 |
|---|---|
| [Javascript] Confirm 확인 창 띄우기 (0) | 2022.11.11 |
| [Javascript] 문자열, 숫자 길이 구하는 함수 (0) | 2020.02.05 |
| [Javascript] 마우스 오버, 아웃 기능 구현 (0) | 2020.01.28 |
| [Javascript] div 숨기기 보이기 (show, hide) (0) | 2019.12.26 |