HTML 이미지 맵
웹 이미지의 클릭 가능한 영역
브라우저에서 실행돼요. 파일은 기기 밖으로 나가지 않아요.
도구 불러오는 중…
HTML 이미지 맵 사용 방법
- 클릭할 수 있게 만들 이미지를 추가하세요.
- 어딘가로 연결할 부분 위에 사각형, 원, 다각형을 그리고 각 링크와 대체 텍스트를 입력하세요.
- HTML 코드를 복사하거나 완성된 HTML 페이지를 다운로드하세요.
이 도구 소개
이미지의 일부를 클릭할 수 있게 만드세요. 그림 위에 사각형, 원, 다각형을 그리고, 각 영역에 링크, 대체 텍스트, 선택 사항인 툴팁을 지정한 다음 완성된 HTML 이미지 맵을 복사하세요.
이미지 맵은 고정된 픽셀 좌표를 사용하므로, 이미지 크기가 바뀔 때 영역이 맞춰지도록 아주 작은 스크립트를 추가할 수 있어요. 스크립트 없이 이미지에 따라 크기가 조절되는 퍼센트 위치 링크로 내보낼 수도 있어요.
- 기기에서 작동해요. 아무것도 업로드되지 않아요.
- 무료이며 가입도, 워터마크도 없어요.
- 파일 수나 크기 제한이 없어요. 기기가 처리할 수 있는 범위까지 사용할 수 있어요.
질문과 답변
이미지 맵이 반응형 사이트에서도 작동하나요?
일반 이미지 맵은 크기가 조절되지 않아요. 좌표가 원본 이미지의 픽셀 단위이기 때문이에요. 크기 조정 스크립트를 켜거나, 이미지 위에 퍼센트로 링크를 배치하는 퍼센트 링크를 선택하세요.
다각형은 어떻게 그리나요?
다각형을 선택하고 각 꼭짓점을 클릭한 다음 첫 꼭짓점을 클릭하거나 더블클릭하거나 Enter를 눌러 완료하세요. Esc는 취소, Backspace는 마지막 꼭짓점을 삭제해요.
대체 텍스트가 필수인가요?
접근성을 위해 필수예요. 클릭할 수 있는 모든 영역에는 링크가 어디로 가는지 설명하는 대체 텍스트가 있어야 스크린 리더 사용자가 쓸 수 있어요.
HTML 이미지 맵은(는) 무료인가요?
네. ImgImage의 모든 도구는 가입, 워터마크, 처리 파일 수 제한 없이 무료로 사용할 수 있어요.
내 파일이 어딘가에 업로드되나요?
아니요. 파일은 사용 중인 브라우저에서 처리되며 기기 밖으로 나가지 않아요. 여기서 연 내용은 서버로 전송되지 않아요.
휴대폰에서도 작동하나요?
네. 휴대폰, 태블릿, 컴퓨터의 최신 브라우저에서 모두 작동해요. 큰 파일은 컴퓨터에서 더 빠르게 처리돼요.