17 Октябрь 2011

Верстка картинки и ссылки

Приветствую вас, уважаемый читатель.

Сегодня я публикую небольшую заметочку на тему HTML-верстки. Частенько передо мной встает задача поместить иллюстрацию к ссылке слева или сверху от ссылочного текста. Правила юзабилити требуют подсветки текста ссылки при наведении на иллюстрацию. Я решил реализовать данную задачу в соответствии с принятыми стандартами и без использования JavaScript.

Постановка задач

  1. Иллюстрация к ссылке (по которой можно кликать) располагается слева от текста ссылки. При наведении указателя мыши на иллюстрацию текст ссылки подсвечивается.
  2. Иллюстрация располагается над текстом ссылки. При наведении указателя мыши на иллюстрацию текст ссылки подсвечивается опять-таки.

Решение задачи №1

HTML-код:

<div class="link-block">
		<a href="#">
			<img src="add.png" alt="Добавить новый материал" title="Добавить новый материал">
			Добавить материал
		</a>
</div>

Как видите, HTML-код прост до безобразия и валиден стандарту HTML 4.01 Strict (подробнее о выборе HTML-стандарта в DOCTYPE).

CSS-код:

.link-block a
{
padding-left:35px;
}

.link-block a img
{
position:absolute;
left:0;
top:-7px;
}

.link-block
{
position:relative;
}

a:hover
{
color: red;
}

Пояснение к CSS-коду:

3-я строка формирует левый отступ, посредством которого освобождается место для иллюстрирующей картинки.

8-я строка включает режим абсолютного позиционирования для картинки, расположенной внутри тега ссылки в блоке с классом link-block (о применении стиля именно к нужной картинке говорит последовательная нотация в строке 6 .link-block a img). Тем самым мы вырываем картинку из нормального потока и ее положение теперь можно задать свойствами left и top.

9-я и 10-я строка свойства left и top смещают картинку на заданное количество

пикселей слева и сверху относительно верхнего левого угла браузера по умолчанию. Однако если внешний блок обладает свойством position: relative, то наша картинка будет позиционироваться относительно левого верхнего угла родительского блока. Именно для этих целей использована инструкция в строке 15. Теперь свойства left и top задают смещение картинки относительно левого верхнего угла блока <div class=”link-block”>.

Естественно, свойство left: 0 можно опустить, я его указал для большей понятности.

Как видно из строки 10 значения свойств left и top могут быть отрицательными.

20-я строка задает красный цвет ссылок при наведении. И, поскольку картинка с текстом являются содержимым одной ссылки, текст будет подсвечиваться красным при наведении мыши на картинку.

Если у вас возникнет необходимость переместить ссылку с картинкой, то вы всегда сможете воспользоваться свойством margin, которое формирует внешний отступ. Свойство margin необходимо располагать ниже строки 15, наделяя тем самым внешними отступами родительский блок <div class=”link-block”> (см. CSS-код для решения задачи №2, строка 16).

Решение задачи №2

Код HTML остался прежним.

CSS-код:

.link-block a
{
padding-left:35px;
}

.link-block a img
{
position:absolute;
left:85px;
top:-35px;
}

.link-block
{
position:relative;
margin-top:70px;
}

a:hover
{
color: red;
}

Как вы могли заметить, изменения постигли значение свойств left и top в строках 9 и 10. Я задал их ровно такими, чтобы поставить картинку посередине над текстом ссылки. Строкой 16 я добавил внешний верхний отступ, дабы освободить место для размещения картинки над текстом ссылки.

Скачать исходники (*.zip, 2.6 кБ).

Кстати, эту замечательную картинку для иллюстрации ссылки я скачал с отличного сайта iconfinder.com. Очень рекомендую.

С уважением, Андрей Морковин.