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

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

0 голосов
/ 12 ноября 2011

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

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

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

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

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

Ответы [ 3 ]

0 голосов
/ 12 ноября 2011

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

http://jsfiddle.net/XFvQD/

0 голосов
/ 12 ноября 2011

Вы бы искали что-то вроде этого: 

<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>
0 голосов
/ 12 ноября 2011

Является ли фоновое изображение элемента <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 сделает ссылку невидимой, даже если она еще там и может быть нажата.

...