HTML png의 위 ​​/ 위/아래 상태 버튼

Question

위/위/아래 버튼 상태에 3 개의 png 파일이 있습니다.

어떻게 html로 이러한 버튼을 만들 수 있습니까? 그것이 어떻게 작동하는지 그 아니에요 분명히

<button id="myButton" upState="upstate.png" downState="downstate.png" overState="overState.png" onClick="someFunction()"/> 

:

같은 뭔가를 찾고있다. 그러나 그것이 그것이 작동하기를 원하는 방법입니다. 그러한 버튼을 만드는 가장 쉽고/좋은 방법은 무엇입니까? 플래시 사용 불가.

Answer 1

CSS는 단추 놓기를 제외한 모든 항목에 대해 충분할 활성 및 마우스 오버 상태를 지원합니다.

#myButton { 
width: 90px; 
height: 20px; 
background: url(defaultstate.png); 
} 

#myButton:hover { 
background: url(overstate.png); 
} 

#myButton:active { 
background: url(downstate.png); 
} 

버튼 해제 상태가 필요하지 않을 수도 있습니다. 버튼이 양식을 제출하거나 방문자를 새 브라우저 페이지로 보내는 경우 페이지가 새로 고침 /로드되기 전에 버튼 릴리스를 알지 않습니다.

Answer 2

두 가지 방법이 있습니다. 일반적으로 CSS 스프라이트가 이상적입니다 (즉, 그래픽 상태 3 개를 모두 보유하고 현재 상태를 기반으로 한 단일 이미지). 당신이 될 것있어 것처럼 보이는 것을 사용하는 간단한 방법 :

<style type="text/css"> 
#myButton { width: 100px; height: 30px; background: url('upstate.png'); } 
#myButton:hover { background: url('overstate.png'); } 
#myButton:active { background: url('downstate.png'); } 
</style> 

당신이 스프라이트 방법을 사용하여 이것에 대해 이동하는 방법을 알고 싶은 경우는, 체크 아웃 : http://css-tricks.com/css-sprites/

Answer 3

을 위의 게시물에 추가 CSS는 [hover] 스타일 익스텐더를 사용하여 [overstate] 상태 만 해결합니다. 당신이 jQuery를 잘 알고있는 경우에는 다음과 같이

당신은 취급 적절한 이벤트를 설정할 수 있습니다

$('#myButton').on('mousedown', function() { 
    $(this).css('background','url('downstate.png')'); 
}) 

$('#myButton').on('mousedup', function() { 
    $(this).css('background','url('upstate.png')'); 
}) 

$('#myButton').on('mouseover', function() { 
    $(this).css('background','url('overstate.png')'); 
}) 

$('#myButton').on('click', function() { 
    alert('myButton Clicked'); 
})