在所选区域的div上添加href

Question

有div喜欢，

<div id="footer">

<div>

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

想要将href添加到此图片但仅在选定的部分？有可能吗？

选定区域就像，

除可点击区域外，鼠标指针在整个div上看起来都很正常。

Answer 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

Answer 2

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

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

应用css重新定位子div。

Answer 3

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

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

Answer 4

您可以使用HTML图像映射实现这一目标。我们走了！

在Div位置内相应地设置您的协调。所以它可以完成。并且您还可以在一个DIV中放置许多图像映射

<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