Оригинал сообщения
Комментарии: [показать]

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

[570x365]

Сергей Лазарев, новости, фото, события певца.

Самый безбашенный конкурс блогеров линкомаулия продолжается!

А ты уже выбрал хостинг?

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

<a href="#toby" id="toby">

<span class="name">Toby Yong</span><br />

	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.

<img src="images/blog-toby_young_0.jpg" alt="Toby Pic" class="photo" />

</a>

Будет 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 как постоянным читателям блога. Надеюсь вы откликнитесь :)

[показать]LIci WP - WordPress crossposting plugin