웹솔루션개발 25년 노하우! 해피CGI의 모든것

이미지를 업로드하고 간단한 드래그후 링크주소만 입력하면 위치값을 자동으로 생성하여간단한게 이미지맵 소스를 생성할수 있습니다. 이미지맵을 걸때 가장 힘든점이 위치값을 구하는건데요드래그로 자기가 원하는 링크위치의 위치값이 자동으로 생성됩니다.모양도 여러가지로 선택이 가능한 유용한 사이트 입니다.이미지맵을 거는데 어려움을 느끼신다면 한번 이용해 보세요

이미지의 특정 영역에 LINK를 거는 Image Map을 쉽게 할 수 있도록 기능을 제공하는 Image Map Generator 입니다. https://www.image-map.net/ 페이지를 통해 기능을 이용 할 수 있습니다. 첫 페이지에서 PC에 있는 이미지를 직접 업로드를 하거나, 웹페이지의 이미지 링크를 입력 할 수 있습니다. 각종 영역을 선택하여 위치를 지정이 가능하고, 각 영역별로 링크주소, 타이틀, 타겟 지정이 가능 합니다. 영역 세팅이 완료가 된 이후 하단의 "Show Me The Code!" 버튼을 클릭하면 아래와 같이 소스 확인을 할 수 있습니다.

이미지 맵은 이미지 내의 개별 영역을 고유한 대상에 연결하여 작동합니다. 정적 그래픽 또는 사진에 상호 작용을 추가하기 위한 완벽한 솔루션입니다. 이미지 맵의 단점은 브라우저 창의 크기를 변경할 때 픽셀 좌표도최신 상태로 유지해야한다는 것입니다. 이것이 바로 rwdImageMaps.js 플러그인이 들어오는 곳입니다. rwdImageMaps.js는 모든 장치 및 브라우저에서 완벽하게 반응하는 이미지 맵을 만들기위한 경량 jQuery 플러그인입니다. 원본 이미지 크기와 현재 브라우저 창의 크기를 기반으로 이미지 맵의 좌표를 자동으로 다시 계산하고 업데이트합니다. 이미지를 클릭한 위치에 따라서, 위 그림과 같이 다른 경고창이 뜨도록 이미지맵을 지정할수 있습니다. 사용방법은 아래와 같습니다. 반응형 이미지가 되..

ImageMapster는 HTML 이미지 맵의 영역을 활성화하므로 강조 표시하고 선택할 수 있습니다. 수동 제어, 도구 설명, 크기 조정 등을위한 다른 많은 기능이 있습니다. 모든 공통 플랫폼과 호환되도록 설계되었으며 Internet Explorer 6-10, Firefox 3.0+, Safari, Opera 및 Chrome에서 테스트되었습니다. 모바일 장치에서 작동하며 Flash를 사용하지 않습니다. 사용법 안내 입니다. 라이브러리를 호출 하세요. 본문을 구성하세요. 이미지 맵을 활성화 하세요. $('img').mapster(); 쉽게 사용하기는 어렵지만 응용하면 좋을듯 합니다. 특히 지도를 이용하여 서비스를 제공하고 싶은 분이라면 사용해 봄직한 기능입니다. 원 사이트에가면 다양한 옵션 안내와 샘플 및..