将href添加到选定区域的div答案

【问题标题】：add href to div on selected area将href添加到选定区域的div
【发布时间】：2014-01-14 06:07:11
【问题描述】：

像 div 一样，

<div id="footer">

<div>

我已经从 css 为这个 div 定义了背景图像。看起来，

想在这张图片中添加href，但只在选定的部分？有可能吗？

选定区域就像，

鼠标指针在除可点击区域外的整个 div 上应该看起来正常。

【问题讨论】：

尝试使用地图：w3schools.com/tags/tag_map.asp
您不能将地图添加到背景图像中。

标签： jquery html css

【解决方案1】：

你可以使用 CSS 来做到这一点

CSS

#footer{
    background:#f00;
    width:500px;
    height:100px;

}
#footer a.link{
    width:20px;
    height:20px;
    border:solid 1px #000;
    float:right;
    margin:20px;
}

HTML

<div id="footer">
    <a href="#" class="link"></a>
<div>

FIDDLE Demo

【讨论】：

花点时间发布您的解决方案
每当您发布指向 JSFiddle 的链接时，都必须发布一些代码。看到一个简单的编辑帮助 OP，你获得了一些声誉。另请记住，SO 不会推广仅链接的答案（它们将被标记并可能被删除）。我提到它是为了让您成为 SO 的更好贡献者

【解决方案2】：

您可以在页脚中添加一个子 div 并将点击事件绑定到它。

$('#childDiv').bind('click', function() {
window.open('/nextpage.html', '_self');

应用 css 重新定位子 div。

【讨论】：

【解决方案3】：

您可以使用地图并在图片上定义多个可点击区域。

查看此页面。 http://www.w3schools.com/tags/tag_map.asp

【讨论】：

您也可以使用http://www.image-maps.com 来帮助您映射图像。
您不能将地图添加到背景图像中。

【解决方案4】：

您可以使用 HTML 图像映射来实现。我们开始吧！

在 Div Position 内相应地设置您的协调。所以可以做到。并且您还可以在一个 DIV 中放置多个 Image Maps

<img src="rainbow.gif" usemap = #example border=0> 
<map name=example>
<area shape=Rect Coords=0,0,29,29 Href="http://www.yahoo.com"> 
<area shape=Rect Coords=30,30,59,59 Href="http://www.hotbot.com"> 
</map>

查看tutotial

【讨论】：