모바일에서 이미지맵 적용하기

이미지맵을 사용하면 모바일에서 적용이 되지않고 맞지가 않다..

자바스크립트를 이용해서 해결하는 방법도 있지만..간단하게 CSS로 만들 수 있다..

 

CSS--------------

div.imageMap { position:relative; width:device-width;}
div.imageMap img {display:block;}
div.imageMap a.link1 {position:absolute; left:52%; top:45%; width:21%; height:21%; border:1px solid #dfdfdf; }

 

본문-------------

<div class="imageMap ">
<img src="이미지URL" alt=""   />
<a class="link1" href="링크URL" ></a>
</div>