본문 바로가기

자바스크립트(Javascript)로 img 태그 hover 기능 구현하기

반응형

 

자바스크립트(Javascript)로 Rollover Rollout 기능 구현해보자

사실 소스는 간단하다.

아래 함수를 자주 사용하는 js 파일에 추가하면 된다

 

 

function btnOn(obj){
 obj.src=obj.src.replace('off.gif','on.gif');
}

 


function btnOff(obj){
 obj.src=obj.src.replace('on.gif','off.gif');
}

 

 

스크립트를 보시줄 아시면 아~ 하시겠다 ㅎㅎ

그리고 이 함수를 사용하는 방법은 바로 아래와 같다

 

 

<img src="/image/common/btn/swapbtn_off.gif" onmouseover="btnOn(this);" onmouseout="btnOff(this);" alt="버튼" />

 

 

 

원리는 이미지의 파일명의 on, off 라는 문구를 replace 하는 방법이다.

따라서, 한가지 규칙(?)이 있다.

hover 기능이 필요한 이미지를 두개 준비해야 하는데

두개의 이미지 파일명을 on, off 라는 단어 외에는 동일해야 한다는 규칙 말이다.

 

 

swapbtn_off.gif

 

swapbtn_on.gif

 

 

이상 끝

 

 

 

반응형