50 이미지 선택 기능 만들기
지난 강에 이어서 마우스 포인터로 이미지를 클릭했을 때 이미지가 선택되는 효과를 추가해 보겠습니다.
앞에서는 JSON 파일에서 이미지 목록을 가져온 다음 div 태그와 img 태그를 이용해 HTML 문서에 각각 이미지를 추가했습니다. 각 이미지는 div 태그에 둘러싸여 있으므로, div 태그에 onclick 이벤트를 추가하면 이미지를 선택한 효과를 줄 수 있습니다.
다음과 같이 onclick 이벤트를 추가하도록 코드를 수정합니다.
코드 script.js
(중략)
for (var i = 0; i < data.length; i++) {
var div = document.createElement("div");
div.setAttribute("class", "image");
div.onclick = function( ) { // ➊
this.setAttribute("class", "image image-selected"); // ➋
};
var img = document.createElement("img");
img.src = data[i];
div.appendChild(img);
document.body.appendChild(div);
}
(중략)