▶▷ 알아두면 좋은 것들
이번 글에서는 마우스가 글씨 위에 위치할 시에 마우스 오버 효과로 글씨를 바꾸는 것을 해볼까 합니다. ^^
사실 이번 효과를 위해서 필요한 이벤트는 '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>
소스설명
1. 변경할 텍스트 지정
- ID가 'paragraph'인 단락태그 <P>에 접근을 해서. 'innerText' 프로퍼티로 바뀌어질 텍스트를 지정하는 겁니다.
마우스 오버 이벤트가 발생할 경우, 위에서 설정한 문자열이 나타나게 됩니다.
2. 변경할 텍스트 색 지정
- 스타일시트 부분입니다. 스타일 시트에 대해서는 조금 공부를 하시는게 이해하는데 도움이 될거에요.
우선 ID가 'paragraph'인 단락태그 <P>에 접근을 해서, 그 태그가 가지고 있는 'style' 객체에 접근합니다.
그리고 그 'style' 객체의 글자색 속성 프로퍼티인 'color'에 접근을 해서 그 값을 파랑색으로 설정하였습니다.
3. 이벤트 등록
- onmouseover()와 onmouseout() 이벤트를 적용한 모습입니다.
폼이나 폼의 요소가 아닌 이런 단락태그에도 이벤트를 적용할 수 있습니다.
드롭다운 메뉴를 만들어보자! -1탄