작성자:
의학계산기 medcalc.co.kr

이미지 위 핫스팟 좌표 생성기 (checkbox, radio, button, link, tooltip, note)

추가 모드 ON 전환 후 이미지를 클릭하면 좌표가 추가됩니다. 편집 모드 ON 전환 후 포인트를 드래그해 위치를 조정할 수 있습니다.
이미지를 로드하세요
top: -, left: –
포인트 목록 0개
JSON
Quick Manual
  1. 상단에 이미지 URL 입력 후 “이미지 로드/적용”을 누릅니다.
  2. 필요하면 “Responsive (fit to container)”을 켜거나 고정 너비(px)를 지정합니다.
  3. “추가 모드: ON”으로 전환하고, 이미지 위를 클릭해 포인트를 추가합니다.
  4. “편집 모드: ON”에서 포인트를 드래그해 미세 조정합니다.
  5. 우측 목록에서 id/label/top/left/checked를 수정할 수 있습니다.
  6. 완료되면 “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 }
  ]
}
관련 계산기
차팅시 자주 사용하는 문구 큰 글씨 노트 환자와의 간단한 필담을 위한 도구 상병코드 질병코드 상병명 검색 Visual Analogue Scale VAS 통증 평가 글자수 어절수 음절수 통합 계산기 영어 대문자 소문자 변환기 영어단어 생성기 Word maker QR 코드 생성기 Simple QR code Maker Wifi QR 코드 생성기 Wifi QR code Maker 이미지 속 QR 코드 읽기 (QR Code Reader) 간편 이미지 글자 추출기 Simple OCR 픽셀 측정기 & px ↔ mm 변환 계산 (Pixel Measurement Tool) Simple EXIF Viewer 색깔 추출기 Color picker 내 IP 주소 확인 도장 이미지 만들기 (Stamp Image Maker) 간편 변수 입력기 목록 합치기 도구 암호 메모 전송 특수문자 이모티콘(이모지) 입력기 간단한 수식 입력기 간단한 수학 함수 그래프 그리기 엑셀 표를 한글(hwp)에 정확하게 복사하는 도구 간편한 Excel Json 파일 변환기 (Simple Excel-Json Converter) 구분기호가 있는 텍스트를 표로 변환하는 도구 (Text to Table Converter) 표를 HTML 코드로 변환 PDF 파일 텍스트 추출 도구 (PDF Text Extractor) 이미지 위 핫스팟 좌표 생성기 (checkbox, radio, button, link, tooltip, note) 트리맵 생성기 (Tree Map Generator) 심플 이미지 편집기 (선, 도형, 텍스트, 모자이크, 사이즈 축소, WebP) 한글 영어 모스부호 변환기 (Morse Code Converter)
기타 유용한 도구들 ETC.
X
기타 유용한 도구들 페이지로 이동