VPF::При навидении на ссылки меню появляется картинка

WebSchool

Дата 20.11.2011, 16:40 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 19
Регистрация: 19.3.2011

Репутация: нет
Всего: нет

Подскажите грамотную реализацию, меню:

Код


<div class="menu">
<a href="?id=1"><img width="20" height="20" src="img/lnav.png">1111</a>
<a href="?id=2"><img width="20" height="20" src="img/lnav.png">2222</a>
<a href="?id=3"><img width="20" height="20" src="img/lnav.png">3333</a>
<a href="?id=4"><img width="20" height="20" src="img/lnav.png">4444</a>
</div>

Чтобы слева от текста появлялась картинка, при навидении. Сейчас делаю на jquery, но текст определяется ссылкой не весь, а только верхняя его часть.

Предпочтительно решение на css, если возможно. Спасибо!

$дмитрий

Дата 20.11.2011, 19:16 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 10
Всего: 45

Можно вместо картинок(img) задать для тега A фоновую картинку(background-image), а при :hover менять смещение фона (background-position). Это решение на чистом CSS

WebS

Дата 10.12.2011, 15:34 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 115
Регистрация: 1.6.2008

Репутация: нет
Всего: -3

Если Вас не затруднит, привидите пример пожалуйста.

Как ограничить область отображения фона?

--------------------

Услуги web мастера... php+sql, вёрстка, дизайн, программирование, и.д.р

$дмитрий

Дата 10.12.2011, 17:55 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 10
Всего: 45

Примерно так

Код


a{
    background:url(passive.gif) 0 0 no-repeat;
    display:block;
    padding-left:10px;
}
a:hover{
    background-image:url(active.gif);
}

Если фон спрайтом, то просто меняем background-position

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »