4itaz http://4itaz.ru Очередной блог Tue, 09 Oct 2007 17:55:13 +0000 http://wordpress.org/?v=2.0.3 en Альтернатива rollover-ам http://4itaz.ru/alternativa-rollover-am/ http://4itaz.ru/alternativa-rollover-am/#comments Mon, 15 May 2006 20:53:30 +0000 4itaz WEB http://4itaz.ru/alternativa-rollover-am/ Сегодня хочу поделиться замечательным рецептом, простым, как и все гениальное. На замену громоздким конструкциям ролловеров, которым и внятного перевода нет в русском языке. Перекатыши - самое приличное, что мне доводилось слышать. Но, к делу - рецепт позволит создать ссылку с динамически изменяемым при наведении мыши илщбражением. И для этого нам не понадобиться ни капельки java? только лишm css.

Сразу оговорюсь, что рецепт честно подсмотрен у товарища Sebastian Schmieg, написавщего тему Blix для WordPress (на котором, собственно и работает мой сайтик).

Собственно, приступим :) всего и надо - код и изображение

код выглядит очень просто

<_ !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<_html xmlns="http://www.w3.org/1999/xhtml">
<_head>
<_meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<_title>Untitled Document<_ /title>
<_style type="text/css">
<_ !--
a {
font-size: 12px;
color: #333333;
text-decoration:none;
}
a:hover {text-decoration:none;}

.editlink a {
background-image:url(images/edit.gif);
background-repeat:no-repeat;
background-position:right -20px;
padding-right:20px}
.editlink a:hover {background-position:right 0;}
-->
<_ /style>
<_ /head>
<_body>

<_span class="editlink"><_a href="#">Ссылка<_ /a><_ /span>

<_ /body>
<_ /html>

и изображение, в нем вся соль

Все гениальное, как и раньше, в общем то, просто. Просто ссылке задаем background-image сдвинутый наверх на 20px и сдвигаем рисунок вправо (это не обязательно, можно и слева оставить, просто мне так больше наравиться :) ).

.editlink a:hover {background-position:right 0;}

А hover ссылке, в свою очередь, этот параметр возвращаем в 0.

background-position:right -20px;

В принципе, на этом можно было и закруглиться, но есть еще один интересный момент использования этого рецепта. Вместо того, что бы нормально прописать видимый текст ссылки

<_span class="editlink"><_a href="#">Ссылка<_ /a><_ /span>

можно поставить на его место нужное количество

&_nbsp;

(символов неразрывного пробела) и использовать изображение с нанесенным текстом.

Таким образом, мы получим rollover в чистом виде, только без использования Java.

бы все работало - поменяйте <_ на < или просто возьмите код из примера чуть ниже
Результат

]]>
http://4itaz.ru/alternativa-rollover-am/feed/