Question

我正在尝试在我的图片上创建特定的可点击位置。图像大小动态调整到浏览器的大小，所以我需要可点击的框来执行此操作。我创建了一个包含我的图像的框（不确定是否有必要），并认为如果我在该容器中创建了一个框（a.resume），它将相对于图像进行调整。然而，盒子似乎是在容器外面创建的，在屏幕右边。

以下是CSS：

#banner {
    width: 100%;
    margin-bottom: auto;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
}

img.banner {
    max-width: 100%;
    height: auto;
    width: auto;
}

a.resume {
    top: 20%; 
    left: 35px; 
    width: 60%; 
    height: 28%;
    position: relative; 
    background-color: black; /* to see where my box is */
    display:block;
}

以下是HTML：

<body>
<div id="banner">
    <img src="banner.png" class="banner" />
    <a href="banner1.png" class="resume" />
</div>
</body>

另外，如果我能告诉我是否可以简化CSS或HTML中的任何内容，我将不胜感激。我是新手，我可能会让他们复杂化。

Answer 1

您需要使用HTML地图标记。您可以了解它here

使图像可在特定位置点击

1 个答案: