티스토리 뷰

프로그래밍/Front (HTML, CSS, JS)

[JavaScript] 롤오버 만들기

꼬렙 2011. 8. 7. 14:41
728x90

간단한 롤오버 예제인데

함수를 사용하지 않은 것과 사용한 것 2가지로 만들어 보았다

1. 함수를 사용하지 않은 방법

<img src="luffy_off.jpg" width="110" height="150" 
    onMouseOver="this.src='luffy_on.jpg'" onMouseOut="this.src='luffy_off.jpg'" />
<img src="nami_off.jpg" width="110" height="150"
    onMouseOver="this.src='nami_on.jpg'" onMouseOut="this.src='nami_off.jpg'" />

마우스가 오버되지 않았을때는 xxxx_off.jpg를 보여주고 오버되었을때는 xxxx_on.jpg를 보여준다

onMouseOver와 onMouseOut이란 속성을 사용하였고
자기자신의 이미지 소스를 건드릴때는 this라는 명령을 써준다

2. 함수를 사용하는 방법

<HEAD>
    <script language="JavaScript">
    <!--
        function on(obj) {
            obj.src = obj.src.replace('_off', '_on');
        }
         function off(obj) {
              obj.src = obj.src.replace('_on', '_off');
         }
    -->
    </script>

</HEAD>

<BODY>
    <img src="luffy_off.jpg" width="110" height="150" onMouseOver="on(this)" onMouseOut="off(this)" />
    <img src="nami_off.jpg" width="110" height="150" onMouseOver="on(this)" onMouseOut="off(this)" />
</BODY>

this를 넘겨서 src의 파일명을 replace 했다

xxxx_off.jpg ===> xxxx_on.jpg
xxxx_on.jpg ===> xxxx_off.jpg

obj.src = "파일명" 이라고 써줄수도 있지만
이렇게 하게 되면 luffy와 nami에 해당하는 함수를 따로 만들어주거나 if문을 한번 더 거쳐야 하기에
간단히 replace로만 만들어 놓았다


'프로그래밍 > Front (HTML, CSS, JS)' 카테고리의 다른 글

[JavaScript] 버튼 랜덤 이동  (0) 2011.08.09
[JavaScript] 스크립트 코드의 위치  (0) 2011.08.07
[JavaScript] HISTORY  (0) 2011.07.25
[JavaScript] LOCATION  (0) 2011.07.25
[JavaScript] WINDOW  (0) 2011.07.25