css спрайт навигация

Question

Можно ли использовать три изображения в спрайтовой навигации CSS?

Это может выглядеть следующим образом

Мое изображение http://img710.imageshack.us/img710/1429/navigx.jpg

Если это возможно, что будетрезультат?

Answer 1

Да, это возможно. Смотрите пример здесь http://www.ehousestudio.com/blog/view/css_sprite_navigation_tutorial

Answer 2

Вы можете использовать любое количество изображений в спрайте, просто переместите позиционирование в CSS:

.sprite1
{
background-image:url(../../upload/btn_continue_sprite.png);
    background-repeat:no-repeat;
    background-position: -10px 5px;
}

.sprite1:hover
{
background-image:url(../../upload/btn_continue_sprite.png);
    background-repeat:no-repeat;
    background-position: -20px 10px;
}

.sprite2
{
background-image:url(../../upload/btn_continue_sprite.png);
    background-repeat:no-repeat;
    background-position: -30px 15px;
}

.sprite2:hover
{
background-image:url(../../upload/btn_continue_sprite.png);
    background-repeat:no-repeat;
    background-position: -40px 20px;
}

Просто нужно выяснить размеры в пикселях, чтобы правильно выровнять спрайт по элементу, и вы ушли!

Надеюсь, это поможет.

Answer 3

Если все сделано правильно, это будет результат:

альтернативный текст http://img710.imageshack.us/img710/1429/navigx.jpg

Answer 4

Вы можете использовать любое количество изображений в спрайте. Зависит от вашего требования.