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

[DeHver]

Всем доброго вечера, столкнулся с такой проблемкой, сделал кнопки в фотошопе, нужно сделать так, что бы при наведении на 1 картинку выскакивала 2 картика, а при отведении курсора опять выскакивала 1 картика, а при нажатии оставалась бы 2 картинка)Вообщем как-то так!Помогите пожалуйста, реально ли это сделать не через JS, а через html или CSS, hover?

[Dim@]

<div id='but' style='width:100px;height:100px;'>
<img src='http://av.li.ru/382/1862382_8829280.jpg' id='but1'>
<img src='http://i033.radikal.ru/0806/0b/48476622145f.gif' id='but2' style='display:none'>
</div>
<script type='text/javascript'>
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
document.getElementById("but").onmouseover = function (){
 but1.style.display = "none";
 but2.style.display = "block";
}
document.getElementById("but").onmouseout = function (){
 but2.style.display = "none";
 but1.style.display = "block";
}
document.getElementById("but").onmousedown = function (){
 but1.style.display = "none";
 but2.style.display = "block";
}
document.onmouseup = function (){
 but2.style.display = "none";
 but1.style.display = "block";
}

</script>

[Deff]

<br/>
<img src="http://s1.uploads.ru/i/2XExm.png" onclick="Thimg='http://s1.uploads.ru/i/ryGkd.png';this.src=Thimg;" onmouseover="this.src='http://s1.uploads.ru/i/ryGkd.png';Thimg='http://s1.uploads.ru/i/2XExm.png'" onmouseout="this.src=Thimg" />

[Dim@]

Deff,
я знал, я знал - что есть гораздо более легкий способ, просто не додумал

[Dim@]

Deff,
впрочем - там лучше не надо использовать onclick потому что
->при отводе и отпускании мыши остается - неправильно

[Aetae]

Dim@,
Что за жуть? Что за чудовищный велосипед?

Deff,
Уже лучше, но всё равно прошлый век, и лишние телодвиения.

DeHver,
Да именно так всё и делается, причём желательно с помощью спрайтов, чтобы избежать мигания до загрузки(и в целом ускорить загрузку сайта).

<style>
a.button{
cursor:pointer;
display:block;
width:168px;
height:76px;
background-image:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
}
a.button:hover{
background-position: -168px 0;
}
</style>
<a href="#" class="button"></a>

Соответственно картинка должна быть склеена из 2х(и более).

[Deff]

Deff,
Уже лучше, но всё равно прошлый век, и лишние телодвижения.

А где залипание при клике, - О учитель ?

[Aetae]

Скорее всего это не нужно и оп просто криво выразил свои мысли.
Хотя в принципе и это возможно, но уже ie8+:

<style>
a.button{
cursor:pointer;
display:block;
width:168px;
height:76px;
background-image:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
}
a.button:hover, a.button:focus{
background-position: -168px 0;
}
</style>
<a href="#" class="button" tabindex="1"></a>

[Deff]

Aetae,
devote умудрялся как то переключатель через css делать

[Deff]

<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;
}
#MyKnop[alt="#"]{
   background:url(http://s1.uploads.ru/i/EFYyv.png) 0 0 no-repeat;
}
</style>
<img id="MyKnop" onclick="this.alt='#'" src="http://forum.mybb.ru/i/blank.gif"/>