Насчёт подмены картинок hover

[pa6kevi4]

Привет всем!
Хочу задать вопрос.

Я реализовал подмену картинки при наведении на неё мышкой следующим образом:

.change_pic {
    background-image:url(design/jpg/images/home_ru.gif); 
    background-repeat: no-repeat;
    cursor: pointer; 
    width: 177; 
    height: 65; 
}
.change_pic:hover {
    background-image:url(design/jpg_flash/images/home_ru.gif);             
    background-repeat: no-repeat;
    cursor: pointer;
    width: 177;
    height: 65;  
}

Допустим, я решил проделать такой же трюк со второй парой картинок. Нужно ли copy-pastить этот код, или существует какой-либо универсальный вариант для многих картинок.

Заранее БОЛЬШОЕ спасибо!

[SkyM@n]

Можешь задать всем общий класс и впихнуть в него общие свойства.
А потом отдельно для каждого задать background-image. Небольшая экономия в твоем случае, но применять можно. Вообще если ты хочешь сэкономить место, советую обжимать css (минимизаторов в Сети есть немало).

[pa6kevi4]

спасибо, нашёл решение

[pa6kevi4]

И ещё вопрос:

можно ли организовать подмену картинки без использования span, hover и javascript ?

Спасибо

[SkyM@n]

Нет. Странный вопрос.

[OrcXCyber]

а зачем ставить разные background-image?

если можно для всех кнопок ставить один и тот же бэкграунд, но текст другой..
легко же

li { 
  display: inline-block;
  background-image: url(button.png) no-repeat;
  width: 150px; height: 25px;
  color: #fff;
}

li:hover {
  background-image: url(buttonHover.png) no-repeat;
  color: #999;
  font-weight: bold;
}

а потом

<ul>
  <li>
    <a href='index.php?page=News' title='Новости'>Новости</a>
  </li>
  <li>
    <a href='index.php?page=AboutUs' title='О нас'>О нас</a>
  </li>
  <li>
    <a href='index.php?page=Contacts' title='Контакты'>Контакты</a>
  </li>
</ul>

вотъ )) ставим + ))