웹마스터 팁

  2. Support
  3. 웹마스터 팁

손쉬운 롤오버 이미지 자동생성

2003.06.16 08:16

행복한고니

링크보시면 실행시켜 보시면 대강 무슨말인지 이해가 가실겁니다. ^^
그냥 이미지 태그에 적절한 overmode 와 적절한 oversrc 를 써주면 자동으로 롤오버 효과를 줍니다.

// overmode 값
//     없으면 일반적인 롤오버
//     gray_color : 흑백상태에서 오버하면 칼라로. 원본이미지가 칼라일 것.
//     color_gray : 칼라상태에서 오버하면 흑백으로. 원본이미지가 칼라일 것.
//     overlay : 서로 겹쳐지며 변환
// oversrc : 변환될 이미지의 URL
//
// by 행복한고니

var gony_rollover_preImage = new Array;

function gony_rollover(){
        var i, len = document.images.length;
        var obj, overmode, oversrc;
        
        for(i = 0; i < len; i++){
                obj = document.images[i];
                overmode = obj.getAttribute('overmode');
                oversrc = obj.getAttribute('oversrc');

                switch(overmode){
                        case 'gray_color':
                                obj.style.filter = 'gray';
                                obj.onmouseover = new Function("this.style.filter=''");
                                obj.onmouseout = new Function("this.style.filter='gray'");
                                break;
                        case 'color_gray':
                                obj.onmouseover = new Function("this.style.filter='gray'");
                                obj.onmouseout = new Function("this.style.filter=''");
                                break;
                        case 'overlay':
                                if(oversrc){
                                        obj.style.filter = "blendTrans(duration=1)";
                                        obj.onmouseover = new Function("this.filters.blendTrans.Apply(); this.src='"+oversrc+"'; this.filters.blendTrans.Play()");
                                        obj.onmouseout = new Function("this.filters.blendTrans.Apply(); this.src='"+obj.src+"'; this.filters.blendTrans.Play()");
                                        gony_rollover_preImage[gony_rollover_preImage.length] = oversrc;
                                }
                                break;
                        default:
                                if(oversrc){
                                        obj.onmouseover = new Function("this.src='"+oversrc+"'");
                                        obj.onmouseout = new Function("this.src='"+obj.src+"'");
                                        gony_rollover_preImage[gony_rollover_preImage.length] = oversrc;
                                }
                }
        }
        gony_preload();
}
function gony_preload(){
        var i, len = gony_rollover_preImage.length;
        var image_object = new Image;

        for(i = 0; i < len; i++) image_object.src = gony_rollover_preImage[i];
}

window.onload = gony_rollover;

위 소스를 gony_rollover.js 라는 이름으로 저장 하신후, JS파일을 HTML 파일에서 불러와서 HTML 이미지 태그에 <img src="소스1" overmode="모드" oversrc="소스2">
과 같은 형식으로 사용하시면 됩니다.

예제 : http://gony.home.uos.ac.kr/rollover.html

사용예제 :

<html>
<script language="javascript" src="gony_rollover.js"></script>
<body>
<img src="소스1" overmode="overlay" oversrc="소스2">
</body>
</html>




괜찮으면 추천버튼 꾸욱~ ^^
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
랜덤 이미지 롤링위젯스킨에서 컬러셋이 적용되지 않는분은 필독! file xemall 2011.02.02
사이트 모니터링 알리미에요...^^ [3] file web 2010.12.10
"서버에 요청중..." 메세지 없애기 [3] SeoSeungHyun 2011.01.11
레이아웃수정시 참고할 zbXe레이아웃스킨의 css와 layout 상관관계(1.0.0 기본스킨) [21] file 갯가 2008.04.08
IE6부터 IE9까지 대응하기. [7] 정찬명 2010.10.13
탈퇴회원 아이디 재사용 막는 법 [5] 한꼬마 2011.01.18
XE 기본 서식 - 검정 바탕용 : p, div, br 없는 기본 서식입니다. [5] file LutZ 2010.07.01
홈페이지 브라우저 크기 고정시키기 코아 코스튬 2011.01.30
XE 속도 0.0001초라도 올리는 소소한 팁들 (추가) [5] 소렌트. 2010.11.16
좋은 PHP 강좌 사이트들 [1] HolyJohn 2010.12.29
?=down [4] L-Goon 2009.01.19
(게시물, 서명) 원하는 곳에 서명 출력하기 [10] file Simulz 2007.10.08
'대표도메인'연결후 '로그인'이 안될때,,(먹통) moonlight994 2011.01.24
회원확장정보 변수 (출처:sMaker) [5] 시니시즘 2010.07.19
로그인 폼에 관리자는 [Admin] 나타나게 하기 [4] file 오스카 2009.10.10
두개 이상의 홈페이지 운영 - Virtual host 설정 [1] 이성헌 2005.12.15
좋은 레이아웃 찿으시는 분들 선우님이 새로 또 하나의 좋은 레이아웃을 만드 셨네요... [2] 유샤인 2011.01.21
[ 도움요청 ] 게시판 리스트에서 작성한 사람만 작성한 리스트가 보이는 방법 ?? 잘살아서복수!! 2011.01.20
XE에서 레이아웃이나 기타의 페이지에 include 사용에 대한 오해??? [3] DuRi 2011.01.18
앞으로 공용선택자 사용은 그만.... [5] ForHanbi 2010.11.23
태그 쓰기