试图使图像中的区域可点击答案

【问题标题】：Trying to make area in image clickable试图使图像中的区域可点击
【发布时间】：2014-07-12 06:10:34
【问题描述】：

我有一个联系页面设计，其中一个框内有一个“主页”链接。

盒子被顶部的波浪线稍微隐藏了：

我尝试了两种方法来使主页链接可点击：

1) 创建一个 href 作为块元素，并将其放置为 z-index 低于波浪线的 z-index。这会阻止链接被点击。

2) 将 Home 框保留为图像的一部分，并使用 CSS 在其顶部放置一个 href。这仅适用于某些浏览器宽度，即响应能力是一个问题。

a.home-link {
 display: block;
 position: absolute;
 width: 97px;
 height: 51px;
 left: 23vw;
 top: 10vw;
}

有什么更可靠的方法来实现这一点？

【问题讨论】：

使用#2，使用绝对定位，并根据媒体查询的大小变化调整位置。
我刚刚发布了我在#2 中使用的 CSS
图片地图会帮你搞定

标签： html css responsive-design

【解决方案1】：

您可能需要使用pointer-events: none; 进行检查

Working Example

.cover {
    position: absolute;
    top: 0;
    left:25px;
    opacity 0.9;
    pointer-events: none;/* <---relevant bit */
}

【讨论】：

【解决方案2】：

（示例 1 和 2 的混合）您可以创建一个具有更高 z 值的额外 div 并使其不可见，因此您可以单击 home 上方的区域而不是单击 home

又名。非恶意形式：http://en.wikipedia.org/wiki/Clickjacking

【讨论】：

【解决方案3】：

点击页面 - 每个事件都会冒泡到文档级别。检查光标的坐标。查看坐标是否在主页选项卡的范围内。如果是，请执行单击“主页”选项卡应该执行的任何操作。

【讨论】：

【解决方案4】：

您可以使用图像映射，因为它们使图像可点击：

<img src="main.jpeg" width="1000" height="700" alt="image not displayed" usemap="#main">

<map name="main">
  <area shape="rect" coords="0,0,120,40" href="home.htm" alt="Sun">
  <area shape="rect" coords="0,130,40,250" href="about.htm" alt="Mercury">
</map>

【讨论】：

我希望这是响应式的。