使用 jQuery-rwdImageMaps 插件来实现。
注：尽量在 img 标签中添加具体且无单位的 width 和 height，然后可以在 css 中覆盖实现自适应
<body>
<img src="images/example.jpg" width="1024" height="768" usemap="#example" />
<map name="example">
<area shape="poly" coords="254,285,232,270" href="#poly1" title="The Powerpuff Gir" />
<area shape="poly" coords="119,254,103,257" href="#poly2" title="Cartoon Network"/>
<area shape="poly" coords="667,973,718,981,721,985,729,988" href="#poly3" title="Buttercup"/>
<area shape="poly" coords="37,287,39,289,42,289,46" href="#poly4" title="Blossom"/>
<area shape="poly" coords="864,667,912,649,922,667,971" href="#poly5" title="Bubbles"/>
</map>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.rwdImageMaps.js"></script>
<script>
$('img[usemap]').rwdImageMaps();
// 也可以放在 ready 函数里
// $(document).ready(function(e) {
// $('img[usemap]').rwdImageMaps();
// });
</script>