CSS에서 width: 100%가 적용된 이미지는 map으로 연결된 기능이 작동하지 않는다는 것을 알았습니다. 크기가 고정되어있지 않은 이미지는 map이 적용되지 않는게 의문이었고 어떻게 해결해야할까? 생각했습니다.
유명한 문제였다, 해결방법
jQuery를 사용하고싶지는 않지만 예전부터 유명했던 문제였는지 jQuery를 이용한 플러그인으로 해당 문제가 해결 가능합니다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
<script>
$('img[usemap]').rwdImageMaps()
</script>Code language: HTML, XML (xml)위 처럼 적용하면 넓이가 자동적으로 조정되는 이미지에도 기존 image map이 잘 적용됩니다.
참고