[JavaScript] DOM( 이미지 속성 변경 )

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">

	img{
		vertical-align: middle;
		width: 300px;
		height: 300px;
	}

	a{
		font-size: 30px;
		text-decoration: none;
	}
</style>
<script type="text/javascript">
	window.onload=function(){
		var anchs = document.querySelectorAll("a");
		var img = document.querySelector("img");
		var cnt = 1;

		anchs[0].onclick=function(){
			var imgAlt = img.getAttribute("alt");
			if (imgAlt == "img01") {
				cnt = 3;
				img.setAttribute("alt", "img0"+cnt);
				img.setAttribute("src", "resources/image/img0"+cnt+".png");
			}else{
				--cnt;
				img.setAttribute("alt", "img0"+cnt);
				img.setAttribute("src", "resources/image/img0"+cnt+".png");
			}
		}
		
		anchs[1].onclick=function(){
			var imgAlt = img.getAttribute("alt");
			if (imgAlt == "img03") {
				cnt = 1;
				img.setAttribute("alt", "img0"+cnt);
				img.setAttribute("src", "resources/image/img0"+cnt+".png");
			}else{
				cnt++;
				img.setAttribute("alt", "img0"+cnt);
				img.setAttribute("src", "resources/image/img0"+cnt+".png");
			}
		}
	}
</script>
</head>
<body>

	<div>
		<a href="#" id="lt">◀</a>
		<img alt="img01" src="resources/image/img01.png">
		<a href="#" id="gt">▶</a>
	</div>

</body>
</html>

var anchs = document.querySelectorAll("a");
var img = document.querySelector("img");
var cnt = 1;

anchs[0].onclick=function(){
	var imgAlt = img.getAttribute("alt");
	if (imgAlt == "img01") {
		cnt = 3;
		img.setAttribute("alt", "img0"+cnt);
		img.setAttribute("src", "resources/image/img0"+cnt+".png");
	}else{
		--cnt;
		img.setAttribute("alt", "img0"+cnt);
		img.setAttribute("src", "resources/image/img0"+cnt+".png");
	}
}

해당 코드만 해석을 해보겠습니다.

먼저 anchs라는 변수가 선언되어있습니다. 해당 변수는 <a>태그를 선택합니다.

또 img변수는 <img>태그를 선택합니다.

cnt는 이미지의 번호를 위한 변수입니다.

anchs[0]은 <a>태그의 0번지를 말합니다.

첫번째 <a>태그를 뜻하겠죠?

첫번째 <a>태그에는 왼쪽을 가르키는 삼각형을 말합니다.

해당 삼각형을 클릭하면 이미지의 속성을 바꾸는 이벤트를 발생시킵니다.

var imgAlt = img.getAttribute("alt");

우선 imgAlt 변수는 img태그의 alt속성을 담습니다.

alt속성이 "img01"이면 cnt를 3으로 변경합니다 ( 현재 사진을 3장만 넣어놨기때문에 img03까지만 있습니다! )

alt속성이 "img01"이 아니라면 --cnt를 통해 다른 img로 바꾸게 됩니다.

HTML사진이 img01.png

CSS사진이 img02.png

JS사진이 img03.png입니다.

기본 출력 결과에서 왼쪽 삼각형 버튼을 한번씩 총 3번클릭한 결과입니다.

728x90

'JS 관련 > JavaScript' 카테고리의 다른 글

[JavaScript] Dom(태그 이동시키기) (0)	2022.02.01
[JavaScript] DOM( 태그 추가하기 / 이동하기 ) (0)	2022.01.31
[JavaScript] DOM( img바꾸기 ) (0)	2022.01.29
[JavaScript] DOM( createElement / createAttribute ) (0)	2022.01.28
[JavaScript] DOM(parentNode / childNodes) (0)	2022.01.27

'JS 관련 > JavaScript' 카테고리의 다른 글

티스토리툴바