VPF::Смена картинки при hover - Форум программистов

ksnk

Дата 6.7.2009, 01:38 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Казалось бы известная задача, однако...

есть линейка слов, образующая горизонтальное меню и комплект соответствующих им картинок. К примеру ['o компании', 'прайс-лист','контакты'] - слова и ['o_kompanii.gif','prajs-list.gif','kontakty.gif'] - картинки 20px высотой, в верхней части которых написаны эти слова серым цветом, в нижней - красным. Задача - сфрмировать из этого добра меняющееся при наезде мышкой меню.

Решение с background'ом и сменой background-position не подходит по той причине, что для правильной установки бякграунда нужно знать ширину ячейки, а она, потенциально, может быть разной.

Сейчас такое меню сделал на JavaScript примерно так

Код


ul.ulmenu li a div{
    height:10px; margin:4px 0; 
    overflow:hidden;
}

Код


<ul class="ulmenu">
 ...
<li><a href="{url}"><div>
         <img src="{item>>translit}.gif" alt="{item}">
</div></a></li>

Код


    $('ul.ulmenu>li>a').hover(function(){
        $(this).find('div')[0].scrollTop=10;
    },function(){
        $(this).find('div')[0].scrollTop=0;
    })

нельзя ли сделать такое без использования JavaScript.

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Рыжий

Дата 6.7.2009, 02:10 (ссылка)

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

Загрузка ...

Помешанный

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

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

ksnk, Почему бы не использовать css спрайты?
Например как тут: http://www.alistapart.com/d/sprites/ala-buttons1.html

ksnk

Дата 6.7.2009, 08:00 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Цитата(Рыжий @ 6.7.2009, 02:10

)

ksnk, Почему бы не использовать css спрайты?

Цитата(ksnk @ 6.7.2009, 01:38

)

Решение с background'ом и сменой background-position не подходит по той причине, что для правильной установки бякграунда нужно знать ширину ячейки, а она, потенциально, может быть разной.

, Ширина ячейки задается только шириной картинки.

В принципе вопрос можно поставить так - есть ли в CSS свойство, которое позволяет сдвинуть изображение, кроме background-position?

Или так. Как имея картинку сформировать ячейку такой-же ширины?

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

Код


ul.ulmenu li a div{
    height:10px; margin:4px 0; 
    overflow:hidden;
    background-position:0 0;
}
ul.ulmenu li a:hover div{
    background-position:0 10px;
}
ul.ulmenu li a div img{
    visibility:hidden;
}

Код


<ul class="ulmenu">
 ...
<li><a href="{url}" style="background-image:url({item>>translit}.gif)"><div>
         <img src="{item>>translit}.gif" alt="{item}">
</div></a></li>

В принципе - работает...

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

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