html不规则图片映射 img area map

一、问题描述

在广告图上做映射 删除 点击 按钮，css附上遮罩，限制点击后面内容。动画加载，每次加载页面只出现一次，如图所示：

二、解决办法

用area标签做映射 但是area要包在map中

html:先放图片img 增加属性usermap，之后放map，其中name = usemap，area标签属性如下：

属性	值	描述
alt	text	规定区域的替代文本。如果使用 href 属性，则该属性是必需的。
coords	coordinates	规定区域的坐标。
href	URL	规定区域的目标 URL。
hreflangNew	language_code	规定目标 URL 的语言。
mediaNew	media query	规定目标 URL 是为何种媒介/设备优化的。默认：all。
nohref	value	HTML5 不支持。 规定没有相关链接的区域。
relNew	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	规定当前文档与目标 URL 之间的关系。
shape	default rect circle poly	规定区域的形状。
target	_blank _parent _self _top framename	规定在何处打开目标 URL。
typeNew	MIME_type	规定目标 URL 的 MIME 类型。 注：MIME = Multipurpose Internet Mail Extensions。

 

 代码：

<div class="imgsContainer" v-if="advShow">
            <img src="./img/biaozhang.png" usemap="#advertisement"> 
            <map name="advertisement" id="advertisement">
                <area shape="circle" coords="1025, 52, 23" @click="closeAds" style="cursor: pointer;">
                <area shape="rect" coords="480,316,650,366" @click="btnclick" style="cursor: pointer;">
            </map>
         </div>

 css:

 

代码：

.imgsContainer {
        background-color: rgba(0, 0, 0, 0.6);
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        img {
            transform: translate(-50%, -50%);
            position: absolute;
            top: 40%;
            left: 50%;
            animation: showAdsMove 0.75s ease;
            animation-iteration-count: 1;
        }
    }

@keyframes showAdsMove {
    0% {
        width: 0;
        height: 0;
    }
    100% {
        height: 447px;
        width: 1103px;
    }
}