이미지맵 생성기

이미지에서 클릭 가능한 영역을 지정하고 HTML 코드를 생성합니다

클릭하여 업로드 또는 드래그 앤 드롭

PNG, JPG, GIF, WebP

|

영역 목록

영역이 없습니다

이미지에서 영역을 그려주세요

영역 속성

사용 방법

  • • 사각형: 드래그하여 그리기
  • • 원형: 중심점에서 드래그
  • • 다각형: 클릭으로 점 추가, 더블클릭으로 완성
  • • 선택: 영역 클릭 후 드래그로 이동

브라우저에서만 처리됩니다

HTML 이미지맵 코드

이미지맵 생성기 사용법

  1. 이미지를 업로드하거나 URL을 입력합니다
  2. 도구를 선택하고 이미지에서 영역을 그립니다
  3. 각 영역에 링크 URL과 설명을 입력합니다
  4. 코드 생성 버튼으로 HTML 코드를 복사합니다

꿀팁

  • • 사각형은 드래그, 원은 중심점+드래그, 다각형은 점 클릭 후 더블클릭으로 완성
  • • 영역 목록에서 클릭하면 해당 영역이 선택됩니다

자주 묻는 질문

이미지맵이란 무엇인가요?
하나의 이미지 안에서 여러 영역에 각각 다른 링크를 연결하는 HTML 기술입니다. 지도, 인포그래픽, 제품 이미지 등에 활용됩니다.
어떤 영역 모양을 지원하나요?
사각형(rect), 원형(circle), 다각형(poly) 세 가지 영역 모양을 지원합니다.
반응형 이미지맵도 가능한가요?
기본 HTML 이미지맵은 고정 크기이지만, 생성된 코드에 JavaScript를 추가하면 반응형으로 만들 수 있습니다.