프로그래밍/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'" />
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>
<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로만 만들어 놓았다