僅將 html 鏈接放在背景圖像的一部分上，typ3 站點。

Question

我接管了一個用表格編碼的網站（看起來像 DW），一半是用 Typ3 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>標簽內，否則位置可能不正確。 然而，它可以在 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 鏈接放在背景圖像的一部分上，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