Как с помощью css сделать ссылку-картинку, меняющуюся при нажатии и наведении курсора?

судя по названию картинки ты пытаешься сделать элемент меню, значит у тебя в данном блоке эта ссылка будет единственной, следовательно:
HTML:
<a href="/news.php" class="menu-index-1"> </a>
CSS:
.menu-index-1 {
   background: url('../files/mainmenu/menu_news_idle.png') 50% 50% no-repeat;
   text-align: center;
   display: block; /* что бы можно было указывать высоту */
   height: 40px; /* ширина картинки */
   width: 90px; /* высота картинки */
}
.menu-index-1:hover, .menu-index-1:active {
   background-image: url('../files/mainmenu/menu_news_hover.png');
}
а вообoе  http://htmlbook.ru тебе в помощь, в частности раздел  http://htmlbook.ru/samcss

такая структура не может работать, во первых у тебя картинка выступает как фон, а фон ссылкой быть не может. Для начала в html правильно вставь картинку и сделай ее ссылкой (<a href=" "><img src=" "  /></a>), а потом используй onMouseOver для смены картинки при наведении.
Подробного материала полно в Интернете.