이 프로그램은 코딩 작업 없이, 시각적인 인터페이스를 통해
이미지의 특정 영역에 하이퍼링크를 추가하는
HTML 이미지맵 코드를 생성하는 웹 기반 도구입니다.
주요 기능
- 웹에 게시된 이미지의 URL을 입력하거나 사용자의 로컬 파일을 직접 업로드하여 작업을 시작할 수 있습니다.
- ‘클릭 & 드래그’ 또는 ‘두 번 클릭’의 직관적인 방식으로 이미지 위에 링크 영역을 설정합니다.
- 생성된 영역은 실시간으로 HTML 코드로 변환되며, 링크 주소 수정, 영역 복제 및 삭제 등 세부 편집 기능을 제공합니다.
- 완성된 코드는 ‘코드 복사하기’ 버튼을 통해 클립보드에 복사하여 즉시 활용할 수 있습니다.
- 작업 편의를 위한 돋보기 기능, 키보드를 이용한 정밀 제어, 작업 상태 자동 저장 기능을 지원합니다.
사용 방법
- 이미지 로딩
- ‘파일 업로드’ 버튼을 클릭하여 로컬 이미지 파일을 선택하거나, ‘이미지 URL’ 입력란에 주소를 붙여넣고 ‘URL 로드’ 버튼을 클릭합니다.
- 영역 지정 및 링크 입력
- ‘영역 생성 방식’을 선택한 후, 캔버스에 표시된 이미지 위에서 마우스로 링크를 적용할 영역을 지정합니다. 영역이 생성되면 나타나는 입력창에 연결할 URL을 기입하고 저장합니다.
- 코드 확인 및 복사
- 작업과 동시에 우측 제어판의 ‘생성된 HTML 코드’ 창에 결과가 실시간으로 반영됩니다. ‘코드 복사하기’ 버튼을 클릭하여 전체 코드를 복사합니다.
- 변환된 데이터 사용
- 복사한 코드를 사용하고자 하는 웹사이트 또는 블로그의 HTML 편집기에 그대로 붙여넣어 사용합니다.
GUI 설명
- 이미지 로더: 이미지 URL 입력 필드, URL 로드 버튼, 파일 업로드 버튼으로 구성되어 작업할 이미지를 불러옵니다.
- 작업 공간 (Workspace): 이미지가 표시되며, 링크 영역을 지정하고 편집하는 주 공간입니다.
- 제어판 (Controls):
- 영역 생성 방식: 링크를 만들 그리기 모드(‘드래그’ 또는 ‘두 번 클릭’)를 선택합니다.
- 링크 열기 방식: 링크 클릭 시 새 창 또는 현재 창에서 열리도록 설정합니다.
- 생성된 HTML 코드: 작업 결과물이 실시간 텍스트로 표시되는 창입니다.
- 코드 복사하기 버튼: 생성된 코드를 클립보드로 복사합니다.
주의 사항
- 원활한 기능 사용을 위해 최신 버전의 Chrome, Firefox, Edge 브라우저 사용을 권장합니다.
- 외부 이미지 URL을 사용할 경우, 해당 이미지 서버의 보안 정책(CORS)에 따라 이미지 로딩이 제한될 수 있습니다.
- 작업 내용은 브라우저의 ‘로컬 스토리지’에 임시 저장됩니다. 따라서 브라우저의 인터넷 기록, 캐시, 쿠키 등을 삭제할 경우 저장된 작업 내용이 유실될 수 있습니다.