h5页面实现图片局部热区跳转

最新推荐文章于 2024-09-18 10:24:01 发布

早知晓

最新推荐文章于 2024-09-18 10:24:01 发布

阅读量931

点赞数 7

分类专栏： Web前端 # HTML+CSS 文章标签： javascript h5

本文链接：https://blog.csdn.net/piupiu78/article/details/136185049

版权

Web前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML+CSS

4 篇文章 0 订阅

订阅专栏

本文介绍了如何通过原生`<img>`标签配合`usemap`和`area`标签，以及纯手写方式来实现图片局部热区跳转。作者提供了HTML和CSS代码示例，展示了两种方法的具体实现过程。

摘要由CSDN通过智能技术生成

之前没有了解过图片局部热区跳转这种样式，百度搜索实现方法发现两种方法。所谓图片热区跳转就是用户点击图片中的某些区域可以跳转到不同的页面，如下图，点击“舞动人生馆”可以跳转到舞动人生对应的活动页面，点击展望美好馆可以跳转到展望美好对应的活动页面等等。
在这里插入图片描述

1、通过原生img标签的usemap熟悉绑定map标签，利用area标签实现热区

参考实现1
参考实现2

2、纯手写实现

首先将整张图片设置为背景图，同时外层大盒子设置相对定位，在图片所在盒子内添加热区对应的绝对定位的小盒子，需要量好每个小盒子的宽高和定位位置，js中添加点击跳转方法。

html代码：

<div class="active-list">
	<div class="item" v-for="(item,index) in activeList" :key="index" @click="goTo(item)"></div>
</div>

css代码：

.active-list {
        width: pxrem(750);
        height: pxrem(1724);
        background-image: url(../images/bgImg.png);
        background-size: 100% 100%;
    }

    .item {
        position: absolute;
        cursor: pointer;

        &:nth-child(1) {
            width: pxrem(217);
            height: pxrem(389);
            left: pxrem(272);
            top: pxrem(297);
        }

        &:nth-child(2) {
            width: pxrem(221);
            height: pxrem(238);
            left: pxrem(57);
            top: pxrem(628);
        }

        &:nth-child(3) {
            width: pxrem(208);
            height: pxrem(237);
            left: pxrem(503);
            top: pxrem(634);
        }

        &:nth-child(4) {
            width: pxrem(225);
            height: pxrem(277);
            left: pxrem(276);
            top: pxrem(784);
        }

        &:nth-child(5) {
            width: pxrem(278);
            height: pxrem(238);
            left: pxrem(22);
            top: pxrem(961);
        }


        &:nth-child(6) {
            width: pxrem(228);
            height: pxrem(264);
            left: pxrem(495);
            top: pxrem(948);
        }


        &:nth-child(7) {
            width: pxrem(263);
            height: pxrem(236);
            left: pxrem(261);
            top: pxrem(1106);
        }

        &:nth-child(8) {
            width: pxrem(231);
            height: pxrem(240);
            left: pxrem(51);
            top: pxrem(1295);
        }

        &:nth-child(9) {
            width: pxrem(270);
            height: pxrem(277);
            left: pxrem(440);
            top: pxrem(1304);
        }
    }