자바스크립트 - 이미지 맵: 초보자 가이드

안녕하세요, 미래의 코딩 슈퍼스타! 오늘 우리는 자바스크립트 이미지 맵의 세계로 흥미로운 여정을 떠납니다. 코드를 한 줄도 작성해본 적이 없더라도 걱정하지 마세요 - 나는 당신의 친절한 안내자가 되어, 단계별로 이를 안내할 것입니다. 이 튜토리얼의 끝을 맺을 때, 당신은 프로처럼 상호작용 가능한 이미지를 만들 수 있을 것입니다!

JavaScript - Image Map

이미지 맵이란?

자바스크립트 부분에 들어가기 전에, 먼저 이미지 맵이 무엇인지 이해해 보겠습니다. 피자의 그림을 가지고 있고, 사람들이 다른 토핑을 클릭할 때 다른 일이 일어나기를 원한다고 상상해 보세요. 바로 그게 이미지 맵이 하는 일입니다 - 이미지의 특정 영역을 클릭 가능하게 만듭니다!

HTML로 시작하기

이미지 맵을 만들기 위해, 우리는 기본적인 HTML로 시작합니다. 걱정하지 마세요; 그보다 더 간단합니다!

<img src="pizza.jpg" alt="맛있는 피자" usemap="#pizzamap">

<map name="pizzamap">
<area shape="circle" coords="100,100,50" href="#cheese" alt="치즈">
<area shape="rect" coords="200,50,300,150" href="#pepperoni" alt="페퍼로니">
</map>

이를 해부해 보겠습니다:

우리는 피자 그림을 표시하는 <img> 태그를 가지고 있습니다.
usemap 속성은 이미지를 우리의 맵과 연결합니다.
<map> 태그 내부에서, 우리는 <area> 태그를 사용하여 클릭 가능한 영역을 정의합니다.
각 <area>는 모양( 원 또는 사각형), 좌표, 그리고 링크를 가지고 있습니다.

자바스크립트로 강화하기

이제 우리는 이미지 맵을 더 상호작용적으로 만들기 위해 자바스크립트 마법을 더해보겠습니다!

단계 1: 요소 선택

먼저, 자바스크립트를 사용하여 요소를 선택해야 합니다:

const img = document.querySelector('img[usemap]');
const areas = document.querySelectorAll('area');

이 코드는 우리의 이미지와 정의한 모든 클릭 가능한 영역을 찾습니다.

단계 2: 클릭 이벤트 추가

이제 영역을 클릭할 때 일어나는 일을 정의해 보겠습니다:

areas.forEach(area => {
area.addEventListener('click', function(event) {
event.preventDefault();
alert('You clicked on ' + this.alt);
});
});

이 코드는 각 영역에 클릭 이벤트를 추가합니다. 클릭할 때, 알림을 표시합니다.

단계 3: 영역 강조

이제 시각적으로 강조하겠습니다! 마우스가 위에 올라갈 때 영역을 강조합니다:

function createOverlay(area) {
const overlay = document.createElement('div');
const coords = area.coords.split(',');

overlay.style.position = 'absolute';
overlay.style.left = coords[0] + 'px';
overlay.style.top = coords[1] + 'px';

if (area.shape === 'circle') {
overlay.style.width = coords[2] * 2 + 'px';
overlay.style.height = coords[2] * 2 + 'px';
overlay.style.borderRadius = '50%';
} else {
overlay.style.width = coords[2] - coords[0] + 'px';
overlay.style.height = coords[3] - coords[1] + 'px';
}

overlay.style.backgroundColor = 'rgba(255, 255, 0, 0.3)';
overlay.style.display = 'none';

document.body.appendChild(overlay);
return overlay;
}

areas.forEach(area => {
const overlay = createOverlay(area);

area.addEventListener('mouseover', () => overlay.style.display = 'block');
area.addEventListener('mouseout', () => overlay.style.display = 'none');
});

이 코드는 각 영역에 반투명한 오버레이를 만들고, 마우스가 위에 올라갈 때 표시하고 마우스가 나갈 때 숨깁니다.

모든 것을 함께 모음

이제 우리의 완전한 자바스크립트 코드를 보여드리겠습니다:

const img = document.querySelector('img[usemap]');
const areas = document.querySelectorAll('area');

areas.forEach(area => {
area.addEventListener('click', function(event) {
event.preventDefault();
alert('You clicked on ' + this.alt);
});

const overlay = createOverlay(area);

area.addEventListener('mouseover', () => overlay.style.display = 'block');
area.addEventListener('mouseout', () => overlay.style.display = 'none');
});

function createOverlay(area) {
const overlay = document.createElement('div');
const coords = area.coords.split(',');

overlay.style.position = 'absolute';
overlay.style.left = coords[0] + 'px';
overlay.style.top = coords[1] + 'px';

if (area.shape === 'circle') {
overlay.style.width = coords[2] * 2 + 'px';
overlay.style.height = coords[2] * 2 + 'px';
overlay.style.borderRadius = '50%';
} else {
overlay.style.width = coords[2] - coords[0] + 'px';
overlay.style.height = coords[3] - coords[1] + 'px';
}

overlay.style.backgroundColor = 'rgba(255, 255, 0, 0.3)';
overlay.style.display = 'none';

document.body.appendChild(overlay);
return overlay;
}

결론

축하합니다! 지금 당신은 자바스크립트를 사용하여 상호작용 가능한 이미지 맵을 만들었습니다. 나는 당신이 프로처럼 상호작용 가능한 이미지를 만들 것이라고 말했잖아? 지금 당신을 보니까!

이제 우리가 배운 것을 간단히 요약해 보겠습니다:

우리는 기본적인 HTML로 이미지와 클릭 가능한 영역을 정의했습니다.
우리는 자바스크립트를 사용하여 이 요소를 선택했습니다.
우리는 클릭 이벤트를 추가하여 클릭할 때 알림을 표시했습니다.
우리는 마우스가 위에 올라갈 때 오버레이를 강조했습니다.

메서드 표

이제 우리가 사용한 주요 자바스크립트 메서드 표를 보여드리겠습니다:

메서드	설명
`querySelector()`	CSS 선택자와 일치하는 첫 번째 요소를 선택합니다
`querySelectorAll()`	CSS 선택자와 일치하는 모든 요소를 선택합니다
`addEventListener()`	요소에 이벤트 처리기를 추가합니다
`preventDefault()`	이벤트의 기본 동작을 방지합니다
`createElement()`	새 HTML 요소를 만듭니다
`appendChild()`	요소에 새 자식 노드를 추가합니다

이 개념들을 계속 연습하고 실험해 보세요. 얼마 지나지 않아 다양한 상호작용 가능한 웹 요소를 만들 수 있을 것입니다. 기억하세요, 모든 전문가는 초보자였습니다. 행복하게 코딩하세요!

Credits: Image by storyset