仅将 html 链接放在背景图像的一部分上，typ3 站点。

Question

I have taken over a website that was coded in tables (looks like DW) and is half coded in typo3 CMS and half hard coded.我接管了一个用表格编码的网站（看起来像 DW），一半是用 Typ3 CMS 编码，一半是硬编码。

Anyway, my boss has asked me to make the logo clickable to link to the homepage from every page that the logo shows.无论如何，我的老板要求我使徽标可点击，以便从徽标显示的每个页面链接到主页。 The problem is that the logo is part of the whole image that makes up a third of the page, so linking the whole image is out of the question.问题是徽标是构成页面三分之一的整个图像的一部分，因此链接整个图像是不可能的。

I don't want to have to restructure and slice the images to separate the logo from the BG image, so is it possible to place a link section over the logo only?我不想重组和切片图像以将徽标与 BG 图像分开，那么是否可以仅在徽标上放置链接部分？

I thought about an empty div that sits over the logo section only with a link tag that fills it 100%, is this possible and would it work?我想过一个空的 div，它位于徽标部分，仅带有一个 100% 填充的链接标签，这可能吗？它会起作用吗？ The site is here http://overbeckanalytics.com/typo3/menu-top/about-us.html ... you can save the BG image and see its not just the logo...该网站在这里http://overbeckanalytics.com/typo3/menu-top/about-us.html ...您可以保存 BG 图像并查看其不仅仅是徽标...

Please tell me how I can make a link that sits over the logo only on that image.请告诉我如何制作仅位于该图像上的徽标上的链接。

Answer 1

Is the background image on the <body> element? <body>元素上的背景图像吗？ If so, this should work:如果是这样，这应该有效：

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

With this CSS:使用这个 CSS：

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

Note the <a> tag needs to be directly inside the <body> tag, or else the position may be incorrect.注意<a>标签需要直接在<body>标签内，否则位置可能不正确。 It can be anywhere in the body tag however, at the beginning or the end.然而，它可以在 body 标签中的任何位置，在开头或结尾。

I've also placed the company name inside the link, since it's a bad idea to have a link without any text.我还在链接中放置了公司名称，因为没有任何文本的链接是一个坏主意。 A blank link cannot be understood by browsers designed for disabled users, and it may trigger spam algorithms in search engines.为残疾用户设计的浏览器无法理解空白链接，它可能会触发搜索引擎中的垃圾邮件算法。 The visibility property will make the link invisible, even though it is still there and can be clicked on. visibility属性将使链接不可见，即使它仍然存在并且可以点击。

Answer 2

I provided an example answer.我提供了一个示例答案。 If you're allowed to load a JQuery library and can place the anchor somewhere on the page.如果您被允许加载 JQuery 库并且可以将锚点放置在页面上的某个位置。

http://jsfiddle.net/XFvQD/ http://jsfiddle.net/XFvQD/

Answer 3

You would be looking for something like this:你会寻找这样的东西：

<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 链接放在背景图像的一部分上，typ3 站点。

问题描述

3 个解决方案

解决方案1
0 2011-11-11 23:16:09

解决方案2
0 2011-11-11 23:18:51

解决方案3
0 2011-11-11 23:29:22

仅将 html 链接放在背景图像的一部分上，typ3 站点。

问题描述

3 个解决方案

解决方案1 0 2011-11-11 23:16:09

解决方案2 0 2011-11-11 23:18:51

解决方案3 0 2011-11-11 23:29:22

解决方案1
0 2011-11-11 23:16:09

解决方案2
0 2011-11-11 23:18:51

解决方案3
0 2011-11-11 23:29:22