Question

我接管了一个在表格中编码的网站（看起来像DW），并且在typo3 CMS和半硬编码中编码了一半。

无论如何，我的老板要求我点击徽标，从徽标显示的每个页面链接到主页。问题是徽标是构成页面三分之一的整个图像的一部分，因此链接整个图像是不可能的。

我不想重新组织和切片图像以将徽标与BG图像分开，因此是否可以仅在徽标上放置链接部分？

我想到了一个位于徽标部分上方的空div，只有一个100％填充它的链接标签，这是可能的吗？它会起作用吗？该网站在这里http://overbeckanalytics.com/typo3/menu-top/about-us.html ...您可以保存BG图像并查看其不仅仅是徽标......

请告诉我如何在该图片上创建一个仅位于徽标上的链接。

Answer 1

<body>元素上的背景图片是？如果是这样，这应该有效：

<body>
    <a href="http://example.com/" id="logo_link">Example Company</a>
</body>

使用这个CSS：

a#logo_link {
    position: absolute;
    display: block;
    visibility: hidden;
    left: 42px;
    top: 42px;
    width: 42px;
    height: 42px;
}

请注意<a>标记需要直接位于<body>标记内，否则位置可能不正确。它可以是身体标签中的任何位置，但是在开始或结束时。

我还将公司名称放在链接中，因为没有任何文本的链接是个坏主意。设计用于禁用用户的浏览器无法理解空白链接，它可能会触发搜索引擎中的垃圾邮件算法。 visibility属性将使链接不可见，即使它仍然存在且可以单击。

Answer 2

我提供了一个示例答案。如果您被允许加载JQuery库并且可以将锚放在页面的某个位置。

http://jsfiddle.net/XFvQD/

Answer 3

你会找到这样的东西：

<html>
<body>
<img src="http://listphobia.com/wp-content/uploads/honda-v4-concept1.jpg"/>
<a href="http://www.google.com" style="border: 1px solid red; position: absolute; top: 15px; left: 50px; width: 30px; height: 30px;"></a>
</body>
</html>

仅在背景图片的一部分上放置一个html链接，即typo3网站。

3 个答案: