Question

我创建了一个小盒子，我放置在地图的右下角，并希望将facebook徽标作为背景图像，并使div可以点击，以便它引导您到达该站点。我尝试将其添加到代码中，但似乎无法获得fb图像和链接。

CSS（背景图片）：

      #facebook {    
        background-image: url(http://www.ridersmatch.com/Facebook_logo.png); 
        background-repeat: no-repeat; 
        height: 30px;
        width: 30px;
        margin-right: 5px;
        margin-bottom: 5px;
        background:#fff;
        border: 1px solid #ccc;
        border-radius: 10px;
      }

JQUERY（点击功能）：

    map = new google.maps.Map(document.getElementById("map_canvas"), map_options);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push($('<div id="infowindow"/>')[0]);
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push($('<div id="facebook"/>')[0]);

    $('#facebook').click(function() {
         window.open('http://www.facebook.com');        
    });

Answer 1

我认为你可以在div中设置链接并设置锚点的css样式来填充div

CSS

#facebook a { width: 100%; height: 100%; display: block; }

HTML

<div id="facebook">
<a href="http://www.facebook.com"></a>
</div>

Answer 2

检查更新的jsfiddle：http://jsfiddle.net/Jw5VV/1/在jsfiddle中，确保右键单击facebook链接并选择“在新标签/页面中打开”。

问题是您首先要设置background-image，然后将background设置为#fff。然后只应用最后一种样式。

此外，由于您的背景图片非常大，因此您需要指定background-size。

使用此css：

#facebook {    
    background-image: url(http://www.ridersmatch.com/Facebook_logo.png); 
    background-repeat: no-repeat; 
    background-size: 30px 30px;
    height: 30px;
    width: 30px;
    margin-right: 5px;
    margin-bottom: 5px;
    border: 1px solid #ccc;
    border-radius: 10px;
      }

要使facebook-logo可点击，请使用anchor包装，如下所示：

<a href="http://www.facebook.com">
    <div id="facebook"></div>
</a>

您还可以免费使用Facebook div并将#facebook ID直接应用于anchor。

无论哪种方式，您都不需要javascript / jQuery点击功能。

检查更新的jsfiddle：http://jsfiddle.net/Jw5VV/1/

背景图像+将Div划分为链接

2 个答案: