이미지 위 핫스팟 좌표 생성기 (checkbox, radio, button, link, tooltip, note)
추가 모드 ON 전환 후 이미지를 클릭하면 좌표가 추가됩니다. 편집 모드 ON 전환 후 포인트를 드래그해 위치를 조정할 수 있습니다.
top: -, left: –
포인트 목록
0개
JSON
Quick Manual
- 상단에 이미지 URL 입력 후 “이미지 로드/적용”을 누릅니다.
- 필요하면 “Responsive (fit to container)”을 켜거나 고정 너비(px)를 지정합니다.
- “추가 모드: ON”으로 전환하고, 이미지 위를 클릭해 포인트를 추가합니다.
- “편집 모드: ON”에서 포인트를 드래그해 미세 조정합니다.
- 우측 목록에서
id/label/top/left/checked를 수정할 수 있습니다. - 완료되면 “JSON 복사/다운로드”로 결과를 활용 할 수 있습니다.
Responsive (fit to container)
요소의 너비를 부모 컨테이너의 너비에 맞춰 항상 100%로 채우는 방식입니다. 이미지에 width:100%를 주고, 포인트의 좌표를 %로 지정하면 화면 크기가 변해도 포인트가 같은 위치에 정밀하게 유지됩니다.
좌표 입력 팁
- 좌표는 이미지 영역 기준
top/left백분율입니다. - 정밀도가 필요하면 확대해 드래그하고, 우측 목록에서 소수 한 자리 또는 두 자리로 직접 입력하세요.
- 라디오 버튼 모드에서는 한 항목만
checked가 유지됩니다.
프로덕션에 임베드할 때 최소 CSS
.container { max-width: 600px; width: 100%; }
.map { position: relative; width: 100%; }
.map img { width: 100%; height: auto; display: block; }
위와 같이 부모 컨테이너에 최대 너비만 주고, 내부 지도는 width:100%로 두면 반응형으로 동작합니다.
JSON 스키마
{
"image": "이미지 URL",
"responsive": true,
"widthPx": 600,
"controlType": "checkbox|radio",
"style": { "dotSizePx": 18, "shape": "square|circle|diamond|triangle" },
"points": [
{ "id": "p1", "label": "설명", "top": 25.3, "left": 48.6, "checked": false }
]
}
댓글