Question

嗨，我有一个用于图像地图的HTML代码，点击图像的部分，他们做了一些事情。但是当屏幕尺寸改变时，由于我的CSS图像缩小，但图像坐标保持不变，有没有办法制作响应式图像地图，所以当屏幕尺寸改变时，图像地图也会如此。请不要jquery。这是我目前的代码。

HTML
<div class="Wrapper2">
    <div class="Title-Context-Box">
                    <img src="ResturantPic/img1.jpg" alt="" width="98%" height="690" usemap="#Map" />
                        <map name="Map" id="Map">
                            <area alt="" title="Table1" onclick="alert('You are clicking on 2');" shape="poly" coords="10,466,56,450,27,446,0,455" />
                            <area alt="" title="Table2" onclick="alert('You are clicking on 2');" shape="poly" coords="42,436,88,441,116,431,75,427" />
                            <area alt="" title="Table3" onclick="alert('You are clicking on 2');" shape="poly" coords="99,424,127,428,156,420,129,414" />
                            <area alt="" title="Table4" onclick="alert('You are clicking on 2');" shape="poly" coords="170,411,179,411,186,409,196,408,203,405,199,402,193,397,180,398,170,398,164,401,163,410" />
                            <area alt="" title="Table5" onclick="alert('You are clicking on 2');" shape="poly" coords="253,425,215,422,222,407,253,407" />
                            <area alt="" title="Table6" onclick="alert('You are clicking on 2');" shape="poly" coords="148,457,126,467,115,488,127,501,145,507,171,507,188,498,218,492,237,476,239,455,229,446,203,441,179,439,152,440,137,446,130,455" />
                            <area alt="" title="Table7" onclick="alert('You are clicking on 2');" shape="poly" coords="339,399,340,412,371,413,367,393" />
                            <area alt="" title="Table8" onclick="alert('You are clicking on 2');" shape="poly" coords="346,442,351,459,398,460,398,446" />
                            <area alt="" title="Table9" onclick="alert('You are clicking on 2');" shape="poly" coords="348,466,350,502,438,501,415,463" />
                            <area alt="" title="Table10" onclick="alert('You are clicking on 2');" shape="poly" coords="492,445,520,464,575,462,544,436" />
                            <area alt="" title="Table11" onclick="alert('You are clicking on 2');" shape="poly" coords="572,431,622,451,656,439,597,414" />
                            <area alt="" title="Table12" onclick="alert('You are clicking on 2');" shape="poly" coords="533,465,560,513,657,498,608,465" />
                        </map>
                    <br>
    </div>
</div>

CSS

.Wrapper2 {      /* My Wrapper CSS*/
    background-color: #FFFFFF;
    height: auto;
    width: 55%;
    border: thin solid #000000;
    align-content:center;
    border-radius: 10px;
    background-color: #000000;
}

.Title-Context-Box {      /* My Title Text Styling Content Box CSS*/
    font-family:Century Gothic;
    font-size: 26px;
    font-weight: normal;
    text-align: center;
    color: #000000;
    background-color: #FFFFFF;
    height: auto;
    width: 98%;
    margin-bottom: 1%;
    margin-right: 1%;
    margin-left: 1%;
    margin-top: 1%;
    border-radius: 10px;
}

Answer 1

目前没有html代码可以执行您想要的操作。如果使用css调整图像大小，则坐标将不再对齐。这是图像映射的一个限制。

或者你可以尝试使用CSS sprite，或使用动态javascript创建一个图像映射。

响应式图像映射

1 个答案: