이메일에서 이미지 맵 링크가 클릭되지 않을 때~~

"최과장님, 아웃룩에서 문의하기 링크가 안눌려요~!" 

"허걱"

"이유를 모르겠습니다."도 하루 이틀... "마이크로소프트 아웃룩이 문제예요."도 식상할 즈음..

작정하고 달려들기로 했다. 다행이 나와 같은 고민을 가지고 있는 네티즌들이 좀..그 중에도 실력있는 분들이 좀.. 

있어서 많은 도움을 받았다. 

정상적인 상황 - 커서를 올리면 링크 내용이 보인다.	비정상적인 상황 - 커서를 올려도 링크가 안올라온다. (정확히는 화살표 상태.)

기본적으로 아웃룩은 워드의 에디터를 사용하기 때문에 일정 수준의 HTML을 지원한다는 마소 기술지원의 답변을 한 블로거님의 글을 통해서 확인했다. (닥터 박아띠님 : http://drparksc.blog.me/20151415909, MS 기술지원 : http://msdn.microsoft.com/en-us/library/aa338201.aspx#Word2007MailHTMLandCSS_Full ) 

그렇다면 usemap 테그는 사용할 수 없다는 건가? 라는 의문도 잠시 기술지원팀의 글을 읽다보면 usemap은 다행히 지원하는 테그이다. 

그럼 뭐가 문제란 말인가? 

해답은 소스안에 있었으니, 바로 usemap 사용방법과 윈도우 XP에서 사용되는 브라우저들의 관대함에 문제가 있었다. 

우선 윈도우 XP에서는 어느 정도 HTML코드의 에러는 눈감아주고 알아서 보여주는 능력들이 탁월한 관계로 

그냥 모양만 갖추고 있으면 "아~ 니가 바라는게 이미지 맵 링크구나." 하면서 원하는 결과를 보여준 것이다. 

두번째는 usemap코드의 사용이다. 

난 이름이 <img ~~>상에서 <img ~~ usemap="name"> 유즈맵의 이름과 이후 작성하게 되는 실제 링크가 들어가는 <map>의 이름만 같으면 된다고 생각했다. <map name="name"> 이렇게 말이다. 그런데 중요한 요소가 하나 빠졌으니 바로 "#"이다. 바로 이것이 이 이미지에

링크가 걸려있다는 것을 알려주는 것이다.  (라고 지금 혼자서 믿고 있다. -_-. 아직 저걸 꼭 써야한다는 문서를 못봤기 때문에..)

정리하면 <img ~~ usemap="#name" > 이렇게 해줘야 브라우저가 확실하게 "여기에 링크가 걸리는구나.!"하고 이해한다는 것이다. 

그럼 <map name="#name"> 이라고 써줘야 하는가? 음... 결과적으론 안해도 되는 것 같다. 이미지에만 유즈맵 표시를 잘해두면 같은 이름의 좌표를 가져다 쓰는 걸로 예측된다. 

마지막으로 윈도우7에서 익스플로러9와 군소 브라우저들에서 똑같은 현상을 볼 수 있었으니, 이미지 맵 테그를 사용할 때는 "#" 사용에 주의를 해야겠다. 

가정과 예측이 난무하는 포스트지만 나름 유용할 터.. 괜춘하다면 덧글 달아주세요. ㅎㅎㅎ

참고 링크 :

닥터박아띠님 : http://drparksc.blog.me/20151415909

MS 기술지원 : http://msdn.microsoft.com/en-us/library/aa338201.aspx#Word2007MailHTMLandCSS_Full

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/ASP/Q_12013879.html

Glack's : http://glack.tistory.com/14