TIL D-64 javascript, html 로 이미지맵 만들기

오늘 배운 것>

• 예전에 지도이미지에 좌표를 찍어서 작가별 세계관을 만들 수 있게 하자고 했던 아이디어를 구현해보고 싶어서 시작했다.
• 하다보니 게임맵 만드는 것처럼 재밌다.
• 1단계: 유저 이름 입력 -> 2단계: 지명 탐험 -> 3단계: 클릭해서 세부 정보 팝업 확인

로컬에서 돌아가는 영상

작업 순서>

1. 이미지 맵

좌표 반응형으로 구하기: 좌표 구하고, 반응형 플러그인 추가

 

2. 팝업 띄우기

window.open()

 

3. netlify 배포

• package.json -> start script 설정, index.html 로 진입!
• 이미지 폴더 구조: src 안에 넣기. src/img/map.jpg 
• 주소: https://imgmap.netlify.com/#

Inka Map

 

 

추가로 해결할 것>

• 로컬에서는 되는데 netlify 를 거쳐서 배포했을 때 반응형으로 좌표를 구하는 플러그인이 깨지는 상황.
• 게임맵처럼 만드려면 어떤 레이아웃+설명을 추가해야 할까?

 

참고: https://www.tutorialspoint.com/javascript/javascript_image_map.htm ,

https://otep.tistory.com/355, 

http://maschek.hu/imagemap/imgmap/

사진 출처: https://vinyardchris.artstation.com/projects/W29QrQ