이미지 맵 생성기
이미지에 클릭 가능한 핫스팟 영역을 만들어 각각 다른 링크로 연결할 수 있는 HTML 코드를 생성합니다.
사각형, 원형, 다각형 도형으로 영역을 설정하고 각 영역에 URL을 연결하여 인터랙티브한 이미지를 만들어보세요. 지도, 제품 이미지, 인포그래픽 등 다양한 용도로 활용할 수 있습니다.
사용 방법
- 이미지를 드래그앤드롭하거나 클릭하여 업로드합니다.
- 도형 도구(사각형·원형·다각형)를 선택합니다.
- 이미지 위에 드래그하여 클릭 영역을 그립니다.
- 각 영역에 연결할 URL과 대체 텍스트(alt)를 입력합니다.
- 생성된 HTML
<map> 코드를 복사하여 웹 페이지에 사용합니다.
활용 사례
| 용도 | 설명 |
|---|
| 인포그래픽 | 각 영역 클릭 시 관련 페이지로 이동 |
| 제품 이미지 | 부품별 클릭으로 상세 정보 연결 |
| 지도 이미지 | 지역별 클릭으로 해당 페이지 링크 |
| 메뉴판 | 메뉴 항목 클릭으로 상세 정보 연결 |
| 조직도 | 인물 사진 클릭으로 프로필 페이지 연결 |
주요 기능
- 다양한 도형 지원: 사각형(rect), 원형(circle), 다각형(poly) 영역 설정
- 드래그앤드롭 업로드: 이미지를 직접 끌어다 놓아 빠르게 업로드
- 실시간 미리보기: 핫스팟 영역과 링크를 추가하면서 즉시 결과 확인
- HTML 코드 생성: 바로 사용 가능한
<map> + <area> HTML 코드 자동 생성 - 영역 편집: 생성된 영역의 크기·위치·URL 수정 및 삭제 가능