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

最新推荐文章于 2025-05-07 14:26:25 发布

seiEight

最新推荐文章于 2025-05-07 14:26:25 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： tips 文章标签： javascript vue.js 开发语言

本文链接：https://blog.youkuaiyun.com/seiEight/article/details/130953441

tips 专栏收录该内容

25 篇文章

订阅专栏

图片热区通过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('显示地图')
        }
    }
})