试图使图像区域可点击

我有一个联系页面设计，在一个盒子里面有一个'Home'链接。试图使图像区域可点击

盒子稍微隐藏的波浪线在它的上面：

Page with Home link box

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

1）创建一个href作为一个块级元素并将其置于比波浪线低的Z指数处。这可以防止链接被点击。

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

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

什么是更可靠的实现方式？

来源

2014-05-23 Enthusiast

转到以＃2，随着尺寸变化，使用绝对定位并根据需要随媒体查询调整位置。 – Will

我刚刚发布了我在＃2中使用的CSS – Enthusiast

图像地图会做你的工作 –

您可能要检查到使用pointer-events: none;

Working Example

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

来源

2014-05-23 03:00:03 apaul

（例如1的结构和2），你可以创建具有较高的Z值的额外股利和使其不可见如此，而不是点击家里的你点击一个区域的家庭

以上又名非的恶意这样的形式：http://en.wikipedia.org/wiki/Clickjacking

来源

2014-05-23 01:58:12 deme72

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

来源

2014-05-23 02:00:24

您可以使用影像地图，为他们提出了一个形象点击：

<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>

来源

2014-05-28 03:55:22

我希望这能够得到响应。 – Enthusiast

试图使图像区域可点击

回答

相关问题