CoffeeCup Image Mapper

기술

CoffeeCup Image Mapper를 사용하면 이미지의 특정 위치에 대한 여러 링크(또는 핫스팟)를 지정하고 문서나 웹사이트를 가리킬 수 있습니다. 마우스오버 텍스트, ALT 텍스트, 링크 등을 만듭니다. JPG, PNG 및 GIF 이미지 형식을 지원합니다!

어떻게 작동합니까? 몇 켤레가 있는 가구를 판매한다고 가정해 보겠습니다. 그림으로 항목을 표시합니다. 그런 다음 디자인 도구를 사용하여 특정 항목에 윤곽선을 그리고 웹사이트 주소를 할당합니다. 이제 누군가가 가구를 클릭하면 추가 정보를 위해 해당 가구와 연결된 웹 페이지로 리디렉션됩니다.

지도, 회사 팀 사진, 순서도, 아트 갤러리 등과 같은 다른 유형의 이미지에도 동일한 기술을 적용합니다. 꽤 굉장하죠? :)

반응형 이미지 맵은 모바일 사용자에게 친숙합니다.

트래픽의 51% 이상이 모바일 장치에서 발생하므로 반응형 이미지 맵을 업데이트하는 것이 중요합니다. 따라서 더 작은 화면에서 시청자를 위해 더 쉽고 빠르며 기능적으로 탐색할 수 있습니다.

반응형 이미지 맵은 표시 너비에 따라 링크 좌표를 적절하게 조정합니다. 그러나 한 가지 염두에 두어야 할 점은 모바일 장치에서는 마우스오버/마우스오버 시 마우스오버 또는 툴팁을 허용하지 않는다는 것입니다. 이 때문에 사용자가 본능적으로 사용 방법을 알 수 있도록 이미지 맵의 작동 방식을 창의적으로 다시 생각해야 합니다.

어떻게 했니? 쉬운. 터치할 수 있는 항목을 텍스트로 가리키는 지도 근처에 "Key" o"Legend"를 표시하여(또는 이미지 자체에 추가하여) 이미지 지도를 모바일 장치에서 더 기능적으로 만드십시오. 예를 들어, 다음은 카탈로그에서 판매되는 일부 가구를 보여주는 가구 카탈로그입니다. 8개 항목을 설명하기 위해 이미지 아래에 텍스트를 배치했습니다. 소스 이미지에도 추가 지표가 적용되었습니다. 이러한 보조 도구는 모바일 시청자가 만질 수 있는 것이 무엇인지 알 수 있도록 도와줍니다. 이러한 항목 중 하나를 터치하면 유사한 항목에 대한 카탈로그를 검색할 수 있는 페이지로 리디렉션됩니다.