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

Category

  (Homepage)님의 글입니다.
글씨에 마우스를 가져가면 글씨의 배경색이 바뀌는 소스 2003-05-31 21:36:49, 조회 : 2,715, 추천 : 14

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



1.
소스)
<font style="background-color:'skyblue'" onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor='skyblue'">여기에 마우스를 가져와 봐요</font>

소스 실행)
여기에 마우스를 가져와 봐요

소스 설명)
style="background-color:'skyblue'" : 글씨의 배경색을 지정합니다.. 배경색은 하늘색(skyblue)로 지정했습니다..

onMouseOver="this.style.backgroundColor='red'" : 마우스를 버튼 위에 올렸을 때(OnMouseOver) 글씨의 배경색을 지정합니다.. 여기서는 빨간색(red)로 지정했습니다..

onMouseOut="this.style.backgroundColor='skyblue'" : 마우스를 버튼 위에서 밖으로 가져갔을 때(OnMouseOut) 글씨의 배경색을 지정합니다.. 여기서는 하늘색(skyblue)로 지정했습니다..



2.
위의 소스에서는 항상 글씨에 배경색이 있는 경우였습니다..
마우스를 글씨 위로 올렸을 경우에만 배경색이 나타나게 하려면 style과 onMouseOut에서 배경색을 아예 지정하지 않으면 됩니다..

소스)
<font onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''">여기에 마우스를 가져와 봐요</font>

소스 실행)
여기에 마우스를 가져와 봐요

소스 설명)
style에서는 배경색을 지정하는 스타일만 지정했었는데 배경색 지정하는 것을 없앴으므로 style=" " 이라는 것을 아예 지웠습니다..

onMouseOut에서는 색이름 지정하는 부분에 '' 로 해서 색이름을 아예 써주지 않았습니다.. 색을 안써주면 글씨의 style에서 기본 배경색이 안 써져 있는 경우에는 배경색 없음(=투명)으로 지정이 된답니다..

만약 style="background-color:'skyblue'" 는 그대로 놔두고 onMouseOut="this.style.backgroundColor=''" 라고 한 경우에는 마우스를 밖으로 이동했을 경우에는 자동으로 skyblue 라는 색이 지정이 됩니다..



2022-06-27
17:41:09


  추천하기   목록보기

현재글을 이메일로 보내기

No 제 목 글쓴이 작성일 조회
628   핸폰 문자메시지 붙여쓰면 통화요금 줄어     12-11 18:01 2756
627   [플래시 동영상] 포토샵 기본 기능 설명     10-29 12:51 2746
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
  글씨에 마우스를 가져가면 글씨의 배경색이 바뀌는 소스     05-31 21:36 2715
619   비가 내려오는 소스 - 17     09-08 04:56 2696
618   마우스 가져가면 흐려지고 마우스 밖으로 가면 밝아지는 그림     05-28 23:30 2692
617   마우스를 올리면 버튼의 배경색이 바뀌는 소스     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.