Трюк со ссылкой – показываем картинку.
Достаточно часто в процессе веб-разработки дизайнеру приходится сталкиваться с ситуацией, когда необходимо “оживить” ссылку, на которую наводится курсор. Тому, как это сделать без помощи флеша и джава-скриптов посвящен сегодняшний рассказ.
Для начала – ссылки на сайты (c-action, Шаг за горизонт), где подобный метод реализован достаточно хорошо. Безо всякого Flash и Java Script мы легко можем сделать интерфейс сайта более динамичным.
Суть метода заключается в следующем: мы добавляем в ссылку тег <span></span>, содержащий нужную нам графику. И, до поры, до времен прячем его. А при наведении курсора на ссылку делаем видимым. Абсолютное позиционирование контейнера позволяет нам перемещать графику в любое место пространства. Если проявить фантазию, поле для деятельности – безгранично.
Подробный листинг (на примере “Шага за горизонт”):
HTML:
<span id=”item1″><img src=”d1.jpg” alt=”” /></span>
CSS:
a span {
display: none;
}
a:hover span {
display: inline;
position: absolute;
}
а позиционирование элементов назначается отдельно, по id:
#item1 {
left: 495px;
top: 100px;
}
Все достаточно просто, не правда ли?;-)
————————————-
В тему: