Question

我想制作一个带有可点击链接的图片的网页，该链接指向另一个网页。我不希望完整的图像是可点击的，只是它的一小部分。

Mayby我的问题听起来很愚蠢，但我是HTML的新手。希望你们能帮助我！

Answer 1

像@programminginallston所说，你应该使用图像映射。

要使用图片地图，请在usemap标记中添加<img>属性：

<img src="img/image.png" alt="an image" usemap="#usethismap">

接下来，添加<map>标记并添加<area>标记以定义可点击区域：

<map name="usethismap">
    <area shape="rect" coords="0, 0, 100, 100" alt="Area Description" href="otherpage.html">
</map>

您可以在MDN上阅读更多内容：

我希望这有帮助！

Answer 2

另一种实现此目的的方法是，只为那些需要另一种方法的人，将另一个元素（一个按钮，一个div等）放在图像上方并使其可点击。例如，您可以在任意位置放置一个不可见的div（css：opacity:0;）并使其可点击。

我使用jQuery使元素（div）可单击，因此您必须在该页面的<head>标记中包含对jQuery库的引用：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

秘诀是将img和可点击的div放在另一个div中。外部div是position：relative，而内部div是position：absolute。

#clickableDiv{
    position:absolute;
    top: 290px;
    left:85px;
    height: 20px;
    width: 30px;
    background-color:yellow;
    cursor:pointer;
}

See this jsFiddle example，我将图像映射和隐藏的div方法结合起来。

Answer 3

如果您想在某处创建图片链接的一部分，请使用图片地图。

HTML如何在图像上制作可点击按钮

3 个答案: