<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>