我应该使用空 div 作为 Facebook 的链接吗？

Question

我的标题是用 Photoshop 制作的相当大的图像。我想在这个标题的不同位置（左、右、上、中）放置一些带有 facebook、twitter、youtube 等的小自定义图标。我希望这些图标有一个链接到我的 Facebook、YouTube 页面。

我不确定什么是最好的方法。我应该将这些图标放在 Photoshop 中的标题上，然后使用一个空 div，我应该尝试找到图标的确切位置并将其链接到我的 Facebook 页面吗？或者我应该将图标放在我的 div 中并在 css 中使用 z-index 将其放置在标题顶部？

另一个解决方案？我已经上网几个小时了，找不到任何东西..

谢谢！

Answer 1

在我看来，最好使用 标签，并将 background-image 属性设置为任何图标。将它们放置在标题图像的顶部。如果您在与标题相同的图像中创建图标，稍后可能会给您带来问题。单独执行此操作允许您移动它们或更改图标，而无需编辑整个标题图像。

Answer 2

就我个人而言，我会将图标放置在标题顶部，以便以后可以更改它们。只需用锚点围绕图像并将它们放入 div 内即可。使用 CSS 将它们移动到您的确切位置。

<div style="width: 32px; height: 32px;">
    <a href="http://facebook.com">
        <img src="facebook-icon.jpg" width="32" height="32" alt="" />
    </a>
</div>

如果您坚持将图标集成到您所描述的图形设计中，那么链接它们的最佳方法是使用“图像映射”。它实现了与在其上放置透明可点击 div 类似的效果，但更有意义。

<map name="myImageMap"> 
    <area shape="rect" coords="14,45,202,94" href="location-1.html">
    <area shape="circle" coords="396,62,48" href="location-2.html">
</map>

<img src="myImage.jpg" width="1200" height="200" usemap="#myImageMap" />

http://graphicdesign.spokanefalls.edu/tutorials/tech/imagemapexample/imagemap.htm

Answer 3

对此没有真正正确的答案，因为实际上有很多方法可以做到这一点，但如果您只是寻求意见以保持简单，这就是我会做的。然而，这并不意味着这是最好的做法。

<style type="text/css">
    .header { position:absolute; height:200px; width:700px; } /*change width/height to actual size*/
    a.link { background-image:url(t.png); display:block; left:0px; top:0px; z-index:1; }
    a.icon { display:block; position:absolute; top:50px; height:32px; width:32px; z-index:2; } /*assuming icons are same size*/
    a.fb { background-image:url(b.png); right:94px; } /* 3 10px spacers plus 2 icons widths */ 
    a.tw { background-image:url(a.png); right:52px; } /* 2 10px spacers plus 1 icon width */
    a.yt { background-image:url(r.png); right:10px; } /* 1 10px spacer */
</style>

<div class="header">
    <a class="header link" href="#"></a>
    <a class="icon fb" href="http://www.facebook.com/"></a>
    <a class="icon tw" href="http://www.twitter.com/"></a>
    <a class="icon yt" href="http://www.youtube.com/"></a>
</div>

如果您要采用锚点背景图像方法，则需要将锚点设置为一个块，然后设置该块的尺寸，如示例中所示。

一个不错的技巧是将所有图标组合成一个图像，这样您只需要加载一个图像，因此可以减少标头调用。然后，您可以使用 background-position CSS 属性重新定位每个图标的背景图像。在此示例中，我们假设您有三个 32x32 图标，这将构成一张 96x32 图像。

<style type="text/css">
    .header { position:absolute; height:200px; width:700px; } /*change width/height to actual size*/
    a.link { background-image:url(t.png); display:block; left:0px; top:0px; z-index:1; }
    a.icon { background-image:url(x.png); display:block; position:absolute; top:50px; height:32px; width:32px; z-index:2; } /*assuming icons are same size*/
    a.fb { background-position:0px 0px; right:94px; } /* 3 10px spacers plus 2 icons widths */ 
    a.tw { background-position:-32px 0px; right:52px; } /* 2 10px spacers plus 1 icon width */
    a.yt { background-position:-64px 0px; right:10px; } /* 1 10px spacer */
</style>

<div class="header">
    <a class="header link" href="#"></a>
    <a class="icon fb" href="http://www.facebook.com/"></a>
    <a class="icon tw" href="http://www.tweeter.com/"></a>
    <a class="icon yt" href="http://www.youtube.com/"></a>
</div>