소스자료실

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

Category

(Homepage)님의 글입니다.

마우스를 올리면 버튼의 배경색이 바뀌는 소스

2003-05-31 21:19:11, 조회 : 2,688, 추천 : 16

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

1.
소스)

소스 실행)

소스 설명)

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

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

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

소스)

소스 실행)

소스 설명)

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개]