'롤오버'에 해당되는 글 1건

  1. 2007.08.04 [HTML] 롤오버를 간단하게 구현하는 법. 6


HTML에서 물론 자바스크립트를 이용해서 롤오버를 만들어 낼 수 있다.
포토샵에 딸려오는 이미지레디 같은 프로그램을 사용하면 코딩을 직접
하지 않더라도 손쉽게 만들어낼 수 있으나..
그래도 이 손맛이 무시 못한다. 이게 편한때는 얼마든지 많다.
롤오버를 하는데는 복잡한 코드가 필요한 것은 아니다. 얼마든지 간단하게
구현해 낼 수 있는 것이다. 다음의 코드를 참고해 보기 바란다.


<!-- 여러개의 롤오버 이미지를 간단하게 처리 -->
<script language="JavaScript">
<!--
function on(obj) {obj.src = obj.src.replace('_off.gif','_on.gif');}
function off(obj) {obj.src = obj.src.replace('_on.gif','_off.gif');}
//-->
</script>

<!-- script 부분에서 on과 off 일때를 미리 지정해주고 이미지는 뒤에 _on.확장자, _off.확장자만 붙이면 된다.
다음은 이미지 태그에 적용한 예이다.-->
<img src="./img/notice_off.gif"  border="0" onmouseover="on(this)" onmouseout="off(this)" />
<img src="./img/pds_off.gif"  border="0" onmouseover="on(this)" onmouseout="off(this)" />
<img src="./img/freetalk_off.gif"  border="0" onmouseover="on(this)" onmouseout="off(this)" />

대강 보면 감이 오겠지만. img src에서 걸린 gif가 _off로 끝난다. 예를들어 notice_off.gif에 마우스를 올리면
_off부분이 _on으로 바뀌면서 notice_off.gif가 아닌 notice_on.gif가 로드된다. 롤오버를 이렇게 간단하게 구현할 수도 있는 것이다.

Posted by Ozahir
,