Background-position в css

Question

Можем ли мы использовать более 2 изображений для одиночной навигации. Это означает, что когда мы наводим курсор на это изображение, оно показывает 6 разных изображений. Можно ли сделать для одного навигационного изображения? Если возможно значит как?

Я думаю, вы все это понимаете

альтернативный текст http://img714.imageshack.us/img714/2786/mubeen.gif

Answer 1

Если я вас правильно понял, вы хотите постоянно менять положение фонового изображения, когда вы наводите курсор на одну кнопку.

Если это так, тогда я предлагаю сделать статическое изображение в качестве фонового изображения и изменить изображение на GIF-анимацию при наведении курсора

Answer 2

Вы можете (на данный момент - кросс-браузер) установить только одно изображение BG на элемент. Если вы хотите изменить его при наведении или что-то еще, просто добавьте тег a с href, установленным на #:

<a class="img" id="thatoneimg" href="#"></a>

А потом в css:

a.img {
  width: 100px;
  height: 100px;
}
a#thatoneimg {
  backround-image: url(staticimg.jpg);
}
a#thatoneimg:hover {
  backround-image: url(movingimg.gif);
}

Это должно работать кросс-браузер. Вам нужен тег a, чтобы он работал в IE.

Edit: Как сказал Старкс, просто сделайте второе изображение в формате .gif с анимацией. Он не будет использовать спрайты, но будет работать.

Answer 3

Если я правильно понял ваш вопрос, это возможно, но вам понадобится 6 разных HTML-элементов, чтобы фоновое изображение находилось в 6 разных позициях.