Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Смена картинки при hover

Автор: ksnk 6.7.2009, 01:38

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

есть линейка слов, образующая горизонтальное меню и комплект соответствующих им картинок. К примеру ['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.

Автор: Рыжий 6.7.2009, 02:10

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

Автор: ksnk 6.7.2009, 08:00

Цитата(Рыжий @ 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>

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