Долго думала, как по русски перевести новый урок от Криса Койера “Remote Linking”, предложенный им сегодня. И решила назвать это “Мультилинкинг”. Суть в том, чтобы одна ссылка имела несколько кликабельных областей, например, абзац и картинка (не map). При этом не используется ничего кроме HTML и CSS. Посмотрим, как это реализовать.

Сергей Лазарев, новости, фото, события певца.
Самый безбашенный конкурс блогеров линкомаулия продолжается!
А ты уже выбрал хостинг?

А делается это довольно просто. Поместите необходимые вам элементы в анкор одной ссылки (а все ссылки в контейнер), как в примере:

Toby Yong
	Toby Young joins the fifth season of Top Chef to lend his culinary expertise to the judges table. Young is a British journalist and the author of How to Lose Friends and Alienate People.

Будет 4 таких блока ссылок с 2мя кликабельными областями – описание с заголовком и картинка. Теперь необходимо разместить их относительно главного контейнера с помощью свойства позиционирования.

Вот такой CSS код:

.people		{ position: relative;  // главный контейнер}
a		{ text-decoration: none; color: #222; display: block;
	 	 margin: 0 0 0 270px; outline: none; padding: 5px; }
a img		{ border: 1px solid #ccc; display: block; position: absolute; }
a:hover		{ background: #ffefcd; }
a .name		{ font: 18px Georgia, Serif; }
a:hover .name	{ color: #900; font-weight: bold; }
a:hover img	{ border: 5px solid #222; margin: -4px; }
#toby img   	{ top: 0; left: 0; }
#tom img	{ top: 0; left: 134px; }
#gail img	{ top: 134px; left: 0; }
#padma img	{ top: 134px; left: 134px; }

Смотрим что получилось:

Посмотреть пример

Скачать файлы

Очень простой и удобный способ залинковать несколько областей без какого-либо JS. Одно лишь замечение – пример не работает под IE6 – ему объявлена война :)

P.S. Принимаю эстафету от DrNemo

Нужно просто описать чем я живу и кто вообще такая :) Ну что ж, хоть многие уже об этом знают, повторение – мать учения :)

Итак, я – Ольга, мне 22 года. Живу на юге нашей прекрасной России в городе Пятигорске, где сегодня выпал снег :/ Как вы уже заметили, я веду этот блог для вебмастеров вот уже год (6го марта будет ровно год домену). Моя основная деятельность – разработка сайтов от дизайна, до программинга. Работаю удаленно, чему очень рада.

Месяц назад защитила диплом по специальности финансовый менеджмент, до красного не хватило 3х пятерок :)) Теперь лежит в столе и никому не нужен.. По специальности работать в ближайшие годы не планирую. Т.к. планы на этот год резко изменились, когда 2 недели назад я показала мужу тест на беременность с 2мя полосками :)

Сейчас работаю над одним из сайтов по заказу, параллельно стараюсь выделять время на дизайн Блога для вебмастеров версии 3.0. Идейка уже есть :)

Еще у меня живет кот по имени “Мыша” (ведет себя как настоящий грызун) и морской свин Бакс (ведет себя как настоящий свин))

Вот в общем-то и все..

Передаю эстафету Насте Манно, Михаилу и Zer0CooL как постоянным читателям блога. Надеюсь вы откликнитесь :)