프리카운터넷

프로그래밍&개발

기존 공부방

마우스가 올라왔을 때나 클릭했을 때 글자색과 배경색이 바뀌는 버튼 예제입니다.
* function gogo(str){
str.style.background = 'red'
str.style.color = 'white'
}
* background : 버튼의 배경색 컨트롤
* color : 버튼의 전경색(글자) 컨트롤
* 사용가능한 값 - 색의 이름, RGB값, 16진수컬러값을 모두 사용할 수 있습니다. ^^
* background = 'black'
* color = 'rgb(0,255,255)'
* color = '#ff0000'

마우스 올라오면 바뀌는 버튼

클릭하면 바뀌는 버튼

누를 때만 바뀌는 버튼


	[소스] <p align="center"> <input type="button" value="^_^" onmouseout="gogo2(this)" onmouseover="gogo(this)" style="background-color:white;"> <br>마우스 올라오면 바뀌는 버튼 </p> <p align="center"> <input type="button" value="^_^" onmouseout="gogo2(this)" onclick="gogo(this)" style="background-color:white;"> <br>클릭하면 바뀌는 버튼 </p> <p align="center"> <input type="button" value="^_^" onmouseup="gogo2(this)" onmousedown="gogo(this)" style="background-color:white;"> <br>누를 때만 바뀌는 버튼 </p> <script language="JavaScript"> <!-- function gogo(str){ str.style.background = 'red' str.style.color = 'white' } function gogo2(str){ str.style.background = 'white' str.style.color = 'black' //str.style.color = 'rgb(0,255,255)' //str.style.color = '#ff0000' } //--> </script>