<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
'CSS_JS' 카테고리의 다른 글
| html 부드러운 스크롤 쉬운적용 jquery smooth scroll (0) | 2017.11.16 |
|---|---|
| ie8 버전 이하 html5.js 적용하기 (0) | 2017.11.10 |
| 이미지 100% 팝업 띄우기 (0) | 2017.07.19 |
| 브라우저 스크롤 반응 스크롤바 (0) | 2017.05.15 |
| 이미지 링크점선 없애기 (0) | 2017.05.15 |