用作超链接的图像的动态点击区域答案

【问题标题】：Dynamic click area for image used as hyperlink用作超链接的图像的动态点击区域
【发布时间】：2021-01-10 02:28:28
【问题描述】：

header .logo a{
    background-image: url("xxxxxxxxxxxxxxx");
    background-size:100%;
    background-repeat: no-repeat;
    height: 115px;
    width:200px;
    display: inline-flex;
    position: relative;
    text-indent: -90000px;   
}

我刚刚开始接触一些 HTML/CSS，因为我正在尝试为我的工作开发一个网站。我目前有一个徽标，我想将其用作主页超链接，并且一切正常。但是，徽标是一个带下划线的单词，并且下划线垂直向下延伸，基本上当大部分图像包含在前 50 个像素中时，将图片垂直增加 100 个像素（希望这是有道理的）。基本上，我希望能够自定义超链接的一个区域，我基本上只需要将鼠标悬停在图像本身而不是我创建的不可见框上，以便使整个徽标可见。有人可以帮忙吗？

箭头指示我不希望光标变成超链接手形光标的位置。我只希望超链接是图像的确切尺寸，而不是图像周围的框。

【问题讨论】：

“希望这是有道理的” 它没有。请发minimal reproducible example
见stackoverflow.com/questions/18560097/…。

标签： html css

【解决方案1】：

您可以为此使用图像映射！如果你用谷歌搜索“图像地图生成器”，你可以使用在线工具自己构建你想要的形状（矩形、圆形或多边形）。生成器应该为您提供区域标签和徽标的特定坐标。您将必须放置一个图像标签来代替您的链接标签并删除您的 CSS 中的背景内容：

<map name="logoMap">
  <area shape="circle" coords="337,300,44" alt="Nike Homepage" href="/index.html">
</map>

<img src="/images/xxxxxxxxxxxxxxx.png" width="200" usemap="#logoMap" />

【讨论】：