버튼 클릭하면 이미지 변경하기
버튼 클릭하면 이미지 변경하기
이제 버튼을 하나 만들고
그 버튼을 클릭하면 이미지 변경하기 공부를 고고
버튼 클릭하면 이미지가 변경 하는 모습 재현
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>버튼 클릭하면 이미지 변경 하기</title>
<style type="text/css">
img {width: 300px;}
</style>
<script>
function changeImg() {
var img1 = document.getElementById("img1");
img1.src="images/2.jpg" // 2.jpg로 이미지 변경
}
</script>
</head>
<body>
<img src="images/1.jpg" id="img1">
<img src="images/2.jpg" id="img2">
<input type="button" value="이미지 변경하기" onclick="changeImg()">
</body>
</html>
이미지에 각 id값을 주고 클릭 하면 함수명 changeImg를 부르는데 이는
변수 img1 중 src 정보를 경로 ""로 바꾼다는 내용
으로 여기까진 쉬운데..
이리하면 한번은 변경 되지만 다시 버튼을 눌러도 반응이 없다
그래서 토글 할 때 쓰는 법
전역 변수 선언하고 나누기 사용해 나머지 값으로 짝, 홀로 분리해서 토글로!! 이건 자주 쓰니까 외워야징..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>버튼 클릭하면 이미지 변경 하기 - 토글</title>
<style type="text/css">
img {width: 300px;}
</style>
<script>
var cnt = 1; // 전역 변수 (바깥쪽에 선언되는 변수) 중요 안에 지역변수로 쓰이면 변수 1이 쓰이고 사라지고 사라지고...
function imgToggle() {
var img1 = document.getElementById("img1");
var img = document.getElementById("img2");
if(cnt%2==1){
img1.src="images/2.jpg";
img2.src="images/1.jpg";
} else {
img1.src="images/1.jpg";
img2.src="images/2.jpg";
}
cnt++; // cnt 변수 1씩 증가 시키기
}
</script>
</head>
<body>
<img src="images/1.jpg" id="img1">
<img src="images/2.jpg" id="img2">
<input type="button" value="이미지 토글" onclick="imgToggle()">
</body>
</html>
이런식으로 하면된다는!!!