웹마스터 팁

  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>




괜찮으면 추천버튼 꾸욱~ ^^
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
모듈 선택기에서 선택이 안되는 문제해결. 모글리만세 2011.04.22
QRCode 이미지를 줄여서 깔끔하게사용하는 법~ [2] 포토올/wow 2011.04.18
갑자기 관리자 페이지가 안보이거나 330 오류가 날 때는 이렇게 해결! [2] file 세라오빠 2011.04.13
(1.4.5 버전 이상) XE가 설치된 사이트 찾기 [1] SMaker 2011.04.17
댓글 쪽지 알림시 원본글 URL 설정 [1] unnumiya 2011.04.15
1.4.5.2로 업데이트 후 짧은 주소가 제대로 되지 않으실때... [8] file 라르게덴 2011.04.12
다솜플레이어창은 뜨는데 연결중에서 더이상 안넘어가요 탱7 2011.04.15
1.4.4.2부터 게시판 신규게시물 작성이 안되던 문제 [2] 운상유희 2011.03.25
업데이트 어떻게 해야 오류 없이 되나요? [1] 김농주 2011.04.12
텍스타일 카테고리 글목록수 수정 신군임니돠 2011.04.12
제로보드 XE - 오토셋에 설치하기 [11] file 차오이 2007.08.11
레이아웃에 소스추가해서 트래픽보기! [2] file 막시민 2011.03.07
회원가입폼 내멋대로 내맘대로 하기. [9] 지인짜 2010.08.04
[모바일] 모바일웹에서 Pc버전갔다가 다시 모바일버전으로 갈라면 [1] 푸름빠 2011.04.07
XE로 API 처리 완전 정복하기(2) [2] file 라르게덴 2009.11.03
P 개행처리를 BR처럼 Garon 2011.04.04
데이터이전 회원관련해서 알아야 할 사항 [2] 푸름빠 2011.04.03
[PHP 기초] 변수, 상수 [2] 난다날아 2011.03.24
관리자페이지 레이아웃에 게시판을 달아보자 [3] 푸름빠 2011.03.29
"현재 xe코어1.4.4.4버전에서는 익스플로어에서 페이지수정 등의 작업을 할때 에러가 자주 발생하곤 합니다." 유샤인 2011.03.29
태그 쓰기