Изменить изображение onClick и onRelease?

Question

Есть ли возможность изменить изображение кнопок на button_pressed.png, пока кнопка нажата, и измените ее на button_unpressed.png, когда кнопка снова отпущена?

EDIT

У меня есть следующий HTML:

<header id="toolbar"> 
    <div id="toolbar_back"> 
     <form action="#/"> 
      <input type="image" /> 
     </form> 
    </div> 
    <h1 id="toolbar_title">Photo Prints</h1> 
</header> 

И следующий CSS:

#toolbar { 
    background: #FFFFFF; 
    height: 60px; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    box-shadow: 0px 2px 1px #888888; 
    display: table; 
} 

#toolbar_title { 
    color: black; 
    font-size: 30px; 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
} 

#toolbar_back { 
    padding-left: 10px; 
    display: table-cell; 
    vertical-align: middle; 
} 

#toolbar_back input { 
    background: url("../img/toolbar/toolbar_back.png"); 
} 

#toolbar_back input:active { 
    background: url("../img/toolbar/toolbar_back_pressed.png"); 
} 

Но с этим результатом является следующее:

Я просто хочу, чтобы фоновое изображение отображалось, и я хочу, чтобы они были полностью показаны.

Answer 1

Вы хотели бы сделать кнопку фоновое изображение:

#button input { 
    background-image: url("img/button_unpressed.png"); 
    background-size: cover; /* or 'contain' */ 
    background-repeat: no-repeat; 
} 
#button input:active, 
#button input:focus { 
    background-image: url("img/button_pressed.png"); 
} 

Вы, вероятно, также нужно удалить границы и другие стили, чтобы показывать только фоновое изображение.