使图像的一部分可点击答案

【问题标题】：Making part of an image clickable使图像的一部分可点击
【发布时间】：2013-03-10 06:23:10
【问题描述】：

我以这种方式应用了背景图片

HTML

<div id="background">
    <img src="stock.png" class="stretch" alt="image" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

我想让图像的一部分区域可点击，以便它将我链接到下一页，有什么简单的方法吗？

【问题讨论】：

How to make a section of an image a clickable link的可能重复

标签： html css xhtml

【解决方案1】：

用position: absolute;添加另一个div，然后用这个定义他的位置

left:100px;
top:100px;

【讨论】：

在不同的分辨率下观看不会改变它的位置吗？
那么用百分比来定义它。

【解决方案2】：

您总是可以将relative 和z-index 链接到正确的位置：

<div id="background">
    <img src="stock.png" class="stretch" alt="image" />
    <a href="path/to/url/" class="link"></a>
</div>

然后是这样的：

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}
.stretch {
    width:100%;
    height:100%;
    z-index:1;
}
.link {
    width:200px;
    height:200px;
    position:absolute;
    top:50%;
    left:50%;
    display:block;
    z-index:2;
}

然后像使用 CSS 和/或图像一样移动和设置链接样式。

【讨论】：

试过了，但它没有覆盖图像，只是在底部创建一个链接
是的，这是未经测试的，我很抱歉；链接的位置有错字。我已经更新了代码，它在我的最终工作正常。对此感到抱歉。
完美运行，谢谢我的人你能解释一下 z-index 在那里做了什么吗？
刚刚使用z-index 将元素堆叠在一起，以确保图像在div 和链接前面。 Here's some more information on using z-index.

【解决方案3】：

我知道这是一个老问题，但我认为最简单和最好的方法是使用图像映射。它们非常简单，基本上您可以在图像上定义可点击的形状（矩形、圆形，甚至多边形，但我从未使用过这些）。形状的坐标和大小都是相对于图像的，因此非常灵活。

http://www.w3schools.com/tags/tag_map.asp 解释如何使用它。

【讨论】：