0

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

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

4

3 回答 3

2

就像@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 上阅读更多内容：

我希望这有帮助！

于 2013-08-08T17:52:42.853 回答
0

另一种实现这一点的方法（仅适用于需要另一种方法的人）是将另一个元素（按钮、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;
}

请参阅这个 jsFiddle 示例，其中我结合了 imagemap 和隐藏的 div 方法。

于 2013-08-08T18:56:45.440 回答
-2

如果您想在某处制作图像链接的一部分，请使用图像映射。

于 2013-08-08T17:43:16.497 回答