본문 바로가기

javascript

스타일 시트를 이용한 롤오버 자바 버튼 스크립트

<HTML>
<HEAD>
<TITLE> JASKO 샘플 페이지 </TITLE>

<!-- 1. 메모장 등으로 아래의 내용을 HTML 문서의 HEAD 부분에 붙여 넣으세요 -->

<style>

/******** 마우스를 대었을때 버튼의 모양을 설정 합니다 *********/

  .start {color:white; background:orange}

</style>

<script LANGUAGE="JAVASCRIPT">
  function highlightButton(s) {
    if ("INPUT"==event.srcElement.tagName)
      event.srcElement.className=s
  }
</script>

</head>

<body>

<center>

<!--------- 아래의 방법으로 버튼을 만듭니다 ---------------------->

<form NAME="highlight" onmouseover="highlightButton('start')"
onmouseout="highlightButton('')">
  <p>
  <input type="button" value=" 마우스를 대어 보세요 ">
  <input type="button"  onmousedown="this.style.fontStyle='italic'" onmouseup="this.style.fontStyle=''"
  value=" 이곳을 클릭 해 보세요 " onclick="this.value=' 누르랜다고 누르셨네요. 하하하~! '">
  <input type="button" value=" 마우스를 대어 보세요 ">
  </p>
</form>
</font>

</body>
</html>