앵겨의 HTML + CSS2009.11.20 14:55

포스트 내용중에 다른 페이지로의 링크가 걸린 부분은 전부 현재페이지에서 이동되게 되어 있습니다.

현재창을 유지한채 새창(또는 새탭)으로 보시고 싶은 분들은 아래의 방법으로 이용하시기 바랍니다.

크리에이티브 커먼즈 라이선스
Creative Commons License

오랜만에...
오늘은 이미지의 폰트색이나 기타 모든 사항은 동일하나 bg 이미지나 bg 컬러 때문에
부득이하게 png이미지를 사용해야 하고 고객사의 요청으로 이미지 맵으로 링크를
걸어야 할때...ie6에서는 이미지 맵이 안되는 부분을 아주 간단하게 적용해보겠습니다.

위의 조건은 이번 프로젝트를 진행하면서 당했던 서러움에...눈물이 날려고...
뭐 일단 첨부파일을 보시면 바로 이해가 갈듯합니다.

ie6만을 위한 1x1짜리 빈 이미지가 있으므로 조건부 주석을 사용했고
css 또한 핵을 사용했습니다.

소스를 보시면 금방 이해를 하시겠지만 짧게 설명을 드리자면...아시다시피 png이미지는 ie6에서 제대로
표현을 못하고 이미지 맵도 안통합니다.
단순하게 표현을 위해서라면 워낙 많은 소스들이 검색만 좀 하시면 나오지만 이미지맵의 경우
구글신을 통해서만 간간히 찾을수 있었습니다.

찾은 소스또한 자바스크립트로 작성이 되어 있고..제가 잘 못해서 그런지 적용이 좀 어렵더군요...
여튼...그 자바스크립트의 동작원리를 파악하는 도중에 "옳다구나!!"하면서 복잡하게 스크립트를 사용하지 않고
css만의 도움으로도 충분히 가능할거 같더군요..

동작원리는 1x1px짜리 투명 gif이미지에 png이미지와 동일하게 이미지 맵 id(혹은 name)를 적용합니다.
그럼 보이지는 않지만 png이미지와 gif이미지가 브라우저 상에 보이게 됩니다.
(이때 1px짜리 투명 이미지는 png이미지와 사이즈가 동일하여야 합니다.)

그리고 1px짜리 투명이미지와 png이미지를 감싸고 있는 div(그외...)에 position:relative를 주고...
1px짜리 이미지에 position:absolute; top:0; left:0;을 줍니다..그럼 두 이미지가 겹쳐지게 되면서 이미지맵이
마치 png이미지에 적용된것처럼 보이는것이죠...

이전에 선행되어야 할부분은 ie6에서 png이미지를 제대로 표현하게 해주는 스크립트 정도입니다.
그리고 1px짜리 이미지는 조건부 주석으로 ie6 이상과 그외의 브라우저에서는 보이지(?)않게 해주는것이죠..

역시 제일좋은 첨부된 파일을 받아서 테스트 해보시는게...



신고
Posted by 앵겨

댓글을 달아 주세요

  1. 이리저리

    좋은 팁 감사합니다.

    2011.08.10 16:43 신고 [ ADDR : EDIT/ DEL : REPLY ]


티스토리 툴바