'onmouseover', 마우스 오버 효과 - 글씨 바꾸기!

by 조쉬 posted Feb 03, 2015
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

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

▶▷ 알아두면 좋은 것들

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() 이벤트를 적용한 모습입니다.

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

 


Articles

3 4 5 6 7 8 9 10 11 12