Javascript实现图片热区自适应和高亮

图片热区通过img的usemap绑定map下的area，area绑定事件

jQuery库：jquery.rwdImageMaps.min.js jquery.maphilight.min.js

示例（依赖jQuery，vue）

1.引入js

<script src="https://cdn.bootcdn.net/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/maphilight/1.4.2/jquery.maphilight.min.js"></script>

2.创建热区

要想热区自适应变化，要写上img的width、height属性

.my-image {
    height: auto;
    width: 100%;
    max-width: 100%;
}

<img src="./images/index.jpg" alt="first" usemap="#first" class="my-image" width="750" height="1444">
<map name="first" id="first">
    <area shape="rect" coords="32,334,719,554" href="house-info.html" alt="详情">
    <area shape="rect" coords="32,820,719,1042" @click="showDialog" alt="弹窗">
    <area shape="rect" coords="658,154,719,222" @click="showMap" alt="地图">
</map>

3.js初始化和方法

new Vue({
    el: '#app',
    data() {
        return {}
    },
    mounted() {
        $('img[usemap]').rwdImageMaps()
        $('img[usemap]').maphilight()
        window.onresize = function () {
            location.reload()
        }
    },
    methods: {
        // 显示弹窗
        showDialog() {
            console.log('显示弹窗')
        },
        // 显示地图
        showMap() {
            console.log('显示地图')
        }
    }
})