이메일코딩, image-map.net

이미지맵을 이용한 이메일코딩 요청이 들어왔다.

편리함을 추구하기 위해선 언제나 '만약'을 생각한다.

수령받은 링크가 100개가 된다면 어떻게 해야될까?

 

 

https://www.image-map.net/

Free Online Image Map Generator

 

사이트에 방문하여 img를 불러온다. 

민감한 img라도 괜찮다. 이미지를 읽을 뿐, 어디 전송하거나 저장하지 않는다.

그로인해 실제 코드를 얻을때 이미지는 직접 업로드/경로 지정을 해야한다.

 

여기서부턴 직접 경험하는게 오히려 쉽다.

shape 모양을 선택하고,

active라디오 버튼을 클릭하며 왔다갔다하며 영역을 - 이미지를 클릭하면된다.- 잡는다.

target 새창(_blank)으로 띄울것인가 바로(_self)) 띄울것인가만 설정한다.

 

다음과 같이 생성된 코드가 나올것이다, 끝.

 

+

좌표를 찍어 링크를 거의 이미지맵 방법은 웹에서 모두 정상적으로 작동한다.

그러나 모바일 - 해당메일프로그램 - 이미지자동조절 - 사용자에게 보여줌 단계에서 좌표를 잃어버린다.

구글링을 검색할경우 여러 js를 찾을 수 있지만 모두 적용한 결과 최대의 결과물은 다음과같다.

1. 클릭가능

2. 이미지를 반응형으로 변환

3. 좌표 width를 잡음

4. 좌표 height를 잃어 완벽한 영역잡기 실패

 

결론)

모바일에서 링크클릭에대해 크게 신경쓰지않고 이미지가 보여지는것에 만족하는 클라이언트라면 이용.

 

image-map은 웹페이지(홈페이지 등)에서 이용할경우 아무런 문제가 없다.

심지어 웹/윈도우로 오픈한 메일이서도. 그러나 모바일에서는 모두 불안정하다.

웹은 문제가없으니 패스,

 

그 외의 경우라면 해당 게시물 방법을 이용하지 않고

원초적인 방법으로 a태그 안에 링크를 걸 해당 부분적 img를 잘라넣어  herf로 링크를 걸어줄 것.