Размещать html-ссылку только на часть фонового изображения, сайт typo3.

#html #css #image #hyperlink #background

#HTML #css #изображение #гиперссылка #фон

Вопрос:

Я перенял веб-сайт, который был закодирован в таблицах (выглядит как DW) и наполовину закодирован в CMS typo3, а наполовину жестко закодирован.

В любом случае, мой босс попросил меня сделать логотип интерактивным, чтобы ссылаться на домашнюю страницу с каждой страницы, которую показывает логотип. Проблема в том, что логотип является частью всего изображения, занимающего треть страницы, поэтому о связывании всего изображения не может быть и речи.

Я не хочу реструктурировать и нарезать изображения, чтобы отделить логотип от изображения BG, поэтому возможно ли разместить раздел ссылки только над логотипом?

Я подумал о пустом div, который находится над разделом логотипа, только с тегом link, который заполняет его на 100%, возможно ли это и сработает ли это? Сайт находится здесь http://overbeckanalytics.com/typo3/menu-top/about-us.html… вы можете сохранить изображение BG и увидеть на нем не только логотип…

Пожалуйста, скажите мне, как я могу создать ссылку, которая находится поверх логотипа только на этом изображении.

1. Хорошо, я понял это! Я только что добавил встроенный CSS к тегу привязки и разместил ссылку над логотипом. Немного обходной путь, но желаемый эффект есть, так что, думаю, пока я доволен 🙂

Ответ №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 Свойство сделает ссылку невидимой, даже если она все еще там и на нее можно нажать.

Ответ №2:

Я привел пример ответа. Если вам разрешено загружать библиотеку jQuery и вы можете разместить привязку где-нибудь на странице.

http://jsfiddle.net/XFvQD/

1. Я использую jquery только для того, чтобы тег привязки находился внутри таблицы. Что на самом деле, это должно быть во вложенной таблице, если вы можете применить к ней идентификатор / класс.

Ответ №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>