호빵홈 소스자료실
현재위치 : hobbang.co.kr > 소스자료실
소스자료실은 홈페이지를 만들거나 꾸밀 수 있는 자바스크립트와 HTML 소스를 제공합니다.
또한 컴퓨터와 인터넷을 사용하면서 유용한 Tip도 제공하니 각 Category를 선택하세요.

Category

  (Homepage)님의 글입니다.
마우스를 올리면 버튼의 배경색이 바뀌는 소스 2003-05-31 21:19:11, 조회 : 2,688, 추천 : 16

설명을 이해하지 않고 그대로 복사해 가는 경우라면 설명의 출처를 http://hobbang.co.kr 이라고 표기해주시구요.. 자신이 이해하고 이 설명을 참고해서 자신의 홈에 올리는 경우라면 출처 안밝혀도 상관 없습니다..^^



1.
소스)
<INPUT type="button" value="핑크색" OnMouseOver="this.style.backgroundColor='pink'" OnMouseOut="this.style.backgroundColor=''">

소스 실행)


소스 설명)
OnMouseOver="this.style.backgroundColor='pink'" : 마우스를 버튼 위에 올렸을 때(OnMouseOver) 버튼의 배경색을 지정합니다.. this는 현재 태그를 쓴 자신을 말하는 것으로 여기서는 <input> 태그를 의미하는 것이죠.. this.style.backgroundColor는 그냥 앞에서부터 단어 그대로 읽으면 됩니다.. "이 객체(=태그)의 스타일 중 배경색" 이렇게 읽으면 되죠.. 여기서는 pink라는 색을 배경색으로 지정해 줬네요..

OnMouseOut="this.style.backgroundColor='white'" : 마우스를 버튼 위에서 밖으로 가져갔을 때(OnMouseOut) 버튼의 배경색을 지정합니다.. 여기서는 아무색도 지정을 하지 않았으므로 버튼의 기본색이 자동으로 지정됩니다.. 다른 색을 지정하고 싶다면 ' ' 안에 색상코드나 색이름을 써주면 됩니다..



2.
위의 소스를 조금 더 응용을 하여 평상시 버튼 색은 black, 마우스 올렸을 때에는 blue가 되며 글씨 색은 white로 지정을 해보겠습니다..

소스)
<INPUT type="button" value="버튼" style="color:white; background-color:black" OnMouseOver="this.style.backgroundColor='blue'" OnMouseOut="this.style.backgroundColor='black'">

소스 실행)


소스 설명)
style="color:white; background-color:black" : color:색은 전경색(글씨의 색)을 지정하는 것입니다.. 그리고 style=" " 에서 배경색 지정을 하는 것은 background-color:색 으로 지정합니다..
OnMouseOver와 OnMouseOut은 위에서 설명한 소스 설명을 보시면 됩니다..



2022-06-27
17:47:29


  추천하기   목록보기

현재글을 이메일로 보내기

No 제 목 글쓴이 작성일 조회
628   핸폰 문자메시지 붙여쓰면 통화요금 줄어     12-11 18:01 2756
627   [플래시 동영상] 포토샵 기본 기능 설명     10-29 12:51 2747
626   리얼플레이어 파일(ra, rm)을 배경음악으로 듣기     05-24 18:42 2741
625   [펌] META(메타) 태그     05-15 00:41 2738
624   왕초보들의 보안 10계명 - 퍼옴     05-25 23:30 2736
623   파일 확장자 설명     09-14 10:03 2733
622   문서 안에서 다른 문서를 불러오는 IFRAME 태그     05-24 16:44 2732
621   IE의 [파일] - [다른 이름으로 저장] 버튼 만들기     11-21 06:46 2717
620   글씨에 마우스를 가져가면 글씨의 배경색이 바뀌는 소스     05-31 21:36 2716
619   비가 내려오는 소스 - 17     09-08 04:56 2696
618   마우스 가져가면 흐려지고 마우스 밖으로 가면 밝아지는 그림     05-28 23:30 2692
  마우스를 올리면 버튼의 배경색이 바뀌는 소스     05-31 21:19 2688
616   [포토샵] 액션의 spatter 효과로 테두리 만들기     09-26 02:13 2665
615   기념일 계산 자바스크립트(지난날 남은날 모두 계산 가능)     05-28 21:41 2645
614   3종류의 호빵이 내려오는 소스     05-24 13:56 2625
   [1][2][3][4][5][6][7][8][9] 10 ..[51] [다음 10개]
 
Copyright 1999-2022 Zeroboard / skin by Praise Jesus
Copyright ⓒ 1998~ . Hobbang.co.kr. All rights reserved.