반응형 웹에서 이미지맵 사용하기
<meta charset="utf-8" />
<title>Responsive Image Maps jQuery Plugin</title>
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1" />
<script src="../../js/ios-orientationchange-fix.min.js"></script>
<style>
div {width: 100%;}
img[usemap] {border: none; height: auto; max-width: 100%; width: auto; }
</style>
</head>
<body>
<div>
<img src="이미지" width="1024" height="768" usemap="#powerpuffgirls" alt="" />
<map name="powerpuffgirls">
<area shape="poly" coords=" " href="#" title="" alt="" />
</map>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
$('area').on('click', function() {
alert($(this).attr('alt') + ' clicked');
});
});
</script>
</body>
</html>
jQuery-rwdImageMaps-master.zip