Трюк со ссылкой – показываем картинку.

веб-дизайнер, January 27, 2009

Достаточно часто в процессе веб-разработки дизайнеру приходится сталкиваться с ситуацией, когда необходимо “оживить” ссылку, на которую наводится курсор. Тому, как это сделать без помощи флеша и джава-скриптов посвящен сегодняшний рассказ.

Для начала – ссылки на сайты (c-action, Шаг за горизонт), где подобный метод реализован достаточно хорошо. Безо всякого Flash и  Java Script мы легко можем сделать интерфейс сайта более динамичным.

Суть метода заключается в следующем:  мы добавляем в ссылку тег <span></span>, содержащий нужную нам графику. И, до поры, до времен прячем его. А при наведении курсора на ссылку делаем видимым. Абсолютное позиционирование контейнера позволяет нам перемещать графику в любое место пространства. Если проявить фантазию, поле для деятельности – безгранично.

Подробный листинг (на примере “Шага за горизонт”):

HTML:

&lt;span id=”item1″>&lt;img src=”d1.jpg” alt=”" />&lt;/span>

CSS:

a span {
display: none;
}

a:hover span {
display: inline;
position: absolute;
}

а позиционирование элементов назначается отдельно, по id:

#item1 {
left: 495px;
top: 100px;
}

Все достаточно просто, не правда ли?;-)

————————————-

В тему:

0комментариев
Ваше имя
Ваш email*
Ваш сайт
Текст вашего комментария:

Поиск по блогу:
Подписаться:
Популярные:
Облако тегов:
Разное:
Счетчик: