메뉴 건너뛰기

조회 수 9433 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

▶▷ 알아두면 좋은 것들

BOM, 스타일 시트, event-onmouseover, event-onmouseout, 마우스오버에 대한 개념

 

 이번 글에서는 마우스가 글씨 위에 위치할 시에 마우스 오버 효과로 글씨를 바꾸는 것을 해볼까 합니다. ^^

사실 이번 효과를 위해서 필요한 이벤트는 'onmouseover' 와 'onmouseout' 이벤트입니다.

 

 'onmouseover' 이벤트 마우스의 커서가 해당 요소 위에 위치할 때 일어나는 이벤트구요,

 'onmouseout' 이벤트마우스의 커서가 해당 요소에서 위치하다가 빠져나갈 때 일어나는 이벤트 입니다.

 

 그리고 innerText라는 프로퍼티라는 것을 잠시 살펴볼 것인데요.

innerText 태그와 태그 사이에 존재하는 텍스트 데이터를 조작할 수 있도록 하는 프로퍼티입니다.

대부분의 태그가 지원하고 있고, 하지만 가장 유용한 경우는 단락태그 <P>태그가 아닐까 싶네요 ^^

 

 예제를 보면서 간단히 실습해볼까요?

 


소스(Source)

소스다운 Doit.html 

 

<HTML>
<HEAD>
<TITLE>자바스크립트를 활용한 텍스트 마우스 오버 효과</TITLE>
</HEAD>
<SCRIPT language="javaScript">
 function paragraph_onmouseover(){
1.   paragraph.innerText="안녕하세요 ^^ Do it~! 입니다.";
2.   paragraph.style.color="Blue";
 }
 
 function paragraph_onmouseout(){
      paragraph.innerText="마우스를 여기에 위치해보세요.";
      paragraph.style.color="Black";
 }
</SCRIPT>
<BODY>
 3. <P ID=paragraph onmouseover=paragraph_onmouseover() onmouseout=paragraph_onmouseout()>
      마우스를 여기에 위치해보세요.
 </P>
</BODY>

</HTML>

 


소스설명

1. 변경할 텍스트 지정

paragraph.innerText="안녕하세요 ^^ Do it~! 입니다.";

- ID가 'paragraph'인 단락태그 <P>에 접근을 해서. 'innerText' 프로퍼티로 바뀌어질 텍스트를 지정하는 겁니다.

마우스 오버 이벤트가 발생할 경우, 위에서 설정한 문자열이 나타나게 됩니다. 

 

2. 변경할 텍스트 색 지정

paragraph.style.color="Blue";

- 스타일시트 부분입니다. 스타일 시트에 대해서는 조금 공부를 하시는게 이해하는데 도움이 될거에요.

우선 ID가 'paragraph'인 단락태그 <P>에 접근을 해서, 그 태그가 가지고 있는 'style' 객체에 접근합니다.

그리고 그 'style' 객체의 글자 속성 프로퍼티인 'color'에 접근을 해서 그 값을 파랑색으로 설정하였습니다.

 

3. 이벤트 등록

<P ID=paragraph onmouseover=paragraph_onmouseover() onmouseout=paragraph_onmouseout()>

- onmouseover()와 onmouseout() 이벤트를 적용한 모습입니다.

폼이나 폼의 요소가 아닌 이런 단락태그에도 이벤트를 적용할 수 있습니다.

 


List of Articles
번호 제목 날짜 조회 수
187 jquery offset()을 이용한 부드러운 스크롤 이동 2016.09.01 7277
186 지금 보고 있는 웹페이지 창을 닫으려고 합니다." 안나타나게 하기 2014.02.27 7183
185 이동 가능한 레이어팝업 소스 2016.09.01 7166
184 연관배열 사용하기 2016.09.21 7134
183 접근성 윈도우 팝업 띄우기 2016.12.22 7114
182 특정 HTML DOM 엘레멘트로 스크롤 이동하기 2016.09.09 7075
181 'setTimeout', 타이머를 사용하자! file 2015.02.03 7033
180 활용예제 : 체크박스 전체선택 전체해제 /라디오버튼 2014.03.01 7020
179 onkeypress 키보드 이벤트 처리하는 법 – text, textarea 2016.09.21 7001
178 마우스를 오버해서 이미지를 확대해서 보기 2014.02.27 7001
177 jQuery 이미지 슬라이드 오버시 큰이미지 보여주기 소스 file 2014.03.01 6975
176 iframe사용시 높이 자동 조절 2015.06.19 6958
175 쿠키(Cookie)에 값 저장하기 2016.09.21 6952
174 이미지에 마우스 올렸을때 확대 이미지 나오게 하기 (onmouseover 2014.03.01 6923
173 자바스크립트 소수점 자리수 계산 2014.03.01 6897
172 입력된 폼의 내용 똑같이 복사 file 2014.03.01 6892
171 form 값 iframe 으로 넘기기 2014.03.01 6872
170 정규식을 이용한 콤마(comma) 제거하기 2015.06.19 6804
169 예제 - 이미지를 원본 크기로 볼 수 있도록 새창으로 열기 확장 (리사이징 및 이미지 드래그) file 2015.06.19 6798
168 차단된 팝업창을 허용하라는 스크립트 2014.02.27 6751
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved