모바일웹 이미지맵 CSS 설정

모바일웹 이미지맵 CSS 설정

모바일웹 이미지맵 CSS 설정

모바일이 경우 이미지 사이즈가 해상도에 변형됨에 따라 이미지 맵처리가 곤란할 경우가 있습니다.

모바일에서 이미지맵을 사용시 스타일시트 css를 이용하여 적용하는법에 대하여 간단하게 포스팅 해보겠습니다..

 

[ 헤더 부분에 들어가는 css ]

<style type="text/css">

 .imagemap {position:relative;width:device-width;}
 img{display:block;}
 .link1 {position:absolute; top:0%; left:0%; width:33%; height:100%;}
 .link2 {position:absolute; top:0%; left:33%; width:34%; height:100%;}
 .link3 {position:absolute; top:0%; left:67%; width:33%; height:100%;}

 </style>

[ BODY 부분에 들어갈 소스 ]

 <div class="imagemap">
  <img src="201609.jpg" width=100% border="0"/>
   <a class="link1" href="javascript:alert('1번입니다');"></a>
   <a class="link2" href="javascript:alert('2번입니다');"></a>
   <a class="link3" href="javascript:alert('3번입니다');"></a>
 </div>