웹솔루션개발 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(); 쉽게 사용하기는 어렵지만 응용하면 좋을듯 합니다. 특히 지도를 이용하여 서비스를 제공하고 싶은 분이라면 사용해 봄직한 기능입니다. 원 사이트에가면 다양한 옵션 안내와 샘플 및..