Картинка как кнопка

[Aetae]

<style type="text/css">
#MyKnop {
 background:url(http://s1.uploads.ru/i/EFYyv.png) 0 100% no-repeat;
 width:91px;
 height:22px;
}
#MyKnop:hover {
 background-position: 0 0;
}
a.wrp[href="#"] #MyKnop{
  background-position: 0 0!important;
}
</style>
<a class="wrp" href="" onclick="this.href='#';return false"><img id="MyKnop" src="http://forum.mybb.ru/i/blank.gif"/></a>

Не понял, а в чём понт?
Всё также ie8+, только добавлен javascript, лишний элемент, и лишняя картинка.

[Deff]

Не понял, а в чём понт?

фокус теряется - кнопка отклеивается
лишний элемент, - убрал

[Aetae]

фокус теряется - кнопка отклеивается
лишний элемент, - убрал

Ну тут уж без опа непоймёшь какое именно поведение ему нужно было на самом деле.) Каждое поведение по-своему логично и зависит от того что изображает картинка.
И если уж использовать javascript, то не вижу никаого смысла в применении некросбраузерного селектора аттрибутов вместо обычного класса, как, впрочем, не вижу смысла и в использовании пустого изображения(загрузка кторого тоже слегка тормозит загрузкy остального контента):

<style type="text/css">
#button {
	background:url(http://s1.uploads.ru/i/EFYyv.png) 0 100% no-repeat;
	width:91px;
	height:22px;
    border:0;
}
#button:hover , #button.pressed{
	background-position: left top;
}
</style>
<input type="button" id="button" onclick="this.className='pressed'"/>

P.S. Я вообще считаю, что ему достатчно было моего первого варианте.)

[Deff]

Aetae,
Имхо я так понял - что ему нужна кнопка картинкой
Хотя тады Ваш последний вариант с <input type="image" - подойдет

У button стиль нун чистить от бордеров

[ruslan_mart]

Лучше делать грамотней Обе картинки совместить в одну и менять позицию через hover, например:

<table class="myimage"><th/></table>

.myimage {width:50; height:20; background-image:url('ссылка');}
.myimage:hover {background-position:50;}

[Aetae]

<table class="myimage"><th/></table>

.myimage {width:50; height:20; background-image:url('ссылка');}
.myimage:hover {background-position:50;}

Картинка как кнопка

[ruslan_mart]

Aetae, извиняюсь, не разглядывал все посты.

[NekPoMaHt]

Сталкнулся с проблемой. Есть две кнопки из двойной картинки, всё как бы замечательно и прочее, но только тогда, когда кнопки вставляю по отдельности. А когда кставляю две сразу, то происходит следущее: обе кнопки показывают мне картинку №2. Что именно нужно изменить в коде? :-)

<style type="text/css">
#MyKnop {
background:url(адрес кнопки-картинки №1) 0 100% no-repeat;
width:427px;
height:66px;
border:0;
}
#MyKnop:hover {
background-position: 0 0;
}
a.wrp[href="#"] #MyKnop{
background-position: 0 0!important;
}
</style>
<a href="адрес страницы №1" class="button" title="описание при наведении на кнопку-картинку №1"><img id="MyKnop"/></a>


<style type="text/css">
#MyKnop {
background:url(адрес кнопки-картинки №2) 0 100% no-repeat;
width:427px;
height:66px;
border:0;
}
#MyKnop:hover {
background-position: 0 0;
}
a.wrp[href="#"] #MyKnop{
background-position: 0 0!important;
}
</style>
<a href="адрес страницы №2" class="button" title="описание при наведении на кнопку-картинку №2"><img id="MyKnop"/></a>

[рони]

NekPoMaHt,
id уникально не повторяется в нормальной странице

[NekPoMaHt]

Спасибо, уже разобрался