이미지 롤오버 스크립트로 제어하기

이미지 네임 끝을 _off과 _on로 저장하고 사용한다.

제이쿼리 사용 

// rollover

    $('img.rollover, #lnb img').each(function() {

        $(this).mouseover(function() {

            if ($(this).attr('src').match('_off')) {

                $(this).css('cursor', 'pointer');

                $(this).attr('src', $(this).attr('src').replace('_off', '_on'));

                $(this).mouseout(function() {

                    $(this).attr('src', $(this).attr('src').replace('_on', '_off'));

                });

            }

        });

    });

자바스크립트 사용 시 html태그에

<li><a href="#"><img src="/images/cscenter/tab1_off.gif" onmouseover="ImageOver(this)" onmouseout="ImageOut(this)" alt="전체" /></a></li>

onmouseover와 onmouseout를 추가해주고 사용

// 이미지 롤오버

function ImageOver(imgEL){

imgEL.src = imgEL.src.replace("_off.gif", "_on.gif");

}

function ImageOut(imgEL){

imgEL.src = imgEL.src.replace("_on.gif", "_off.gif");

}

[출처] 이미지 롤오버 스크립트로 제어하기|작성자 혜벙벙