Долго думала, как по русски перевести новый , предложенный им сегодня. И решила назвать это “Мультилинкинг”. Суть в том, чтобы одна ссылка имела несколько кликабельных областей, например, абзац и картинка (не map). При этом не используется ничего кроме HTML и CSS. Посмотрим, как это реализовать.
Сергей Лазарев, новости, фото, события певца.
Самый безбашенный конкурс блогеров линкомаулия продолжается!
А ты уже выбрал хостинг?
А делается это довольно просто. Поместите необходимые вам элементы в анкор одной ссылки (а все ссылки в контейнер), как в примере:
<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. Принимаю эстафету от
Нужно просто описать чем я живу и кто вообще такая :) Ну что ж, хоть многие уже об этом знают, повторение - мать учения :)
Итак, я - Ольга, мне 22 года. Живу на юге нашей прекрасной России в городе Пятигорске, где сегодня выпал снег :/ Как вы уже заметили, я веду этот блог для вебмастеров вот уже год (6го марта будет ровно год домену). Моя основная деятельность - разработка сайтов от дизайна, до программинга. Работаю удаленно, чему очень рада.
Месяц назад защитила диплом по специальности финансовый менеджмент, до красного не хватило 3х пятерок :)) Теперь лежит в столе и никому не нужен.. По специальности работать в ближайшие годы не планирую. Т.к. планы на этот год резко изменились, когда 2 недели назад я показала мужу тест на беременность с 2мя полосками :)
Сейчас работаю над одним из сайтов по заказу, параллельно стараюсь выделять время на дизайн Блога для вебмастеров версии 3.0. Идейка уже есть :)
Еще у меня живет кот по имени “Мыша” (ведет себя как настоящий грызун) и морской свин Бакс (ведет себя как настоящий свин))
Вот в общем-то и все..
Передаю эстафету , и как постоянным читателям блога. Надеюсь вы откликнитесь :)
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
