공부했던 자료 정리하는 용도입니다.
재배포, 수정하지 마세요.
클릭하면 이미지 바뀌게 하기
쇼핑몰 같은 사이트에서 많이 볼 수 있는 것으로 작은 이미지를 클릭하면 큰 이미지가 클릭한 이미지로 바뀐다.
HTML 파일(change.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 바꾸기</title>
<link href="change.css" rel="stylesheet"> <!-- css파일 연결-->
</head>
<body>
<div id="content">
<h2>이미지 바꾸기</h2>
<div id="bigImages">
<img id="big" src="image01.png"> <!-- 큰 사진-->
</div>
<div id="smallImages"> <!-- 작은 사진-->
<img class="small" src="image01.png">
<img class="small" src="image02.png">
<img class="small" src="image03.png">
</div>
</div>
<script src="change.js"></script> <!-- js파일 연결->
</body>
</html>기본적인 html문서 틀을 만들어 준 뒤 CSS 파일과 JS 파일을 연결해준다.
자바스크립트의 DOM 을 이용해서 이미지들을 제어한다.
CSS 파일(change.css)
#content{
padding: 30px; /* 전체 (안쪽)여백 */
text-align: center; /* 가운데 정렬 */
}
#bigImages{
margin-bottom: 10px; /* 아래쪽 여백 */
}
#big{ /* 큰 사진 */
width: 310px;
height: 310px;
}
.small{ /* 작은 사진(들)*/
width: 100px;
height: 100px;
}이미지들의 너비와 높이, 여백 등을 지정해준다.
Javascript 파일(change.js)
var bigPic = document.querySelector("#big"); //큰 사진
var smallPics = document.querySelectorAll(".small"); //작은 사진(여러개)
for(var i = 0 ; i < smallPics.length ; i++){
smallPics[i].addEventListener("click", changepic); //이벤트 처리
/*
onclick으로 하면 하나의 요소에 하나의 이벤트만 사용가능
smallPics[i].onclick = changepic;
*/
}
function changepic(){ //사진 바꾸는 함수
var smallPicAttribute = this.getAttribute("src");
bigPic.setAttribute("src", smallPicAttribute);
}addEventListener 를 사용하지 않고 onclick 을 사용할 수도 있다.
( onclick 의 경우 하나의 요소에 하나의 이벤트만 사용 가능하기 때문에 여러 이벤트를 처리해야 할 경우에는 사용할 수 없다.)
이벤트를 mouseover 로 하면 요소 위에 커서를 올릴 때 사진이 바뀐다.
'Front end > 문제 & 실습' 카테고리의 다른 글
| [HTML, CSS, Javascript] D-day 계산기 만들기 (2) | 2020.01.06 |
|---|---|
| [HTML, CSS, Javascript] 간단한 구구단 만들기 (1) | 2019.10.29 |
| [HTML, CSS] 메뉴화면(drop down navigation bar) 만들기 (3) | 2019.05.14 |
| [HTML] 이미지 맵(image map) 사용하기 (1) | 2019.05.11 |