javascript - 'onmouseover', 마우스 오버 효과

▶▷ 알아두면 좋은 것들

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. 이벤트 등록

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

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

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

단축키

Articles