웹마스터 팁

  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>




괜찮으면 추천버튼 꾸욱~ ^^
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
상태바에 2개의 메세지가 뜨는 태그 김주형 2003.07.03
마우스 오른쪽 버튼 누르면 원하는 메뉴 뜨게 만들기(다른사이트) [3] 김주형 2003.07.03
아이프레임으로 나타낸 문서를 크기에 맞게 자동으로 사이즈 조절 [3] DODGE 2003.06.28
웹에서그림그리기 [5] 카이저 2003.06.27
손쉬운 롤오버 이미지 자동생성 [15] 행복한고니 2003.06.16
[스크립트] 메뉴에 마우슬 데면 서브 메뉴가 나온다 [2] 처절초보 2003.06.16
[스크립트]오른쪽 버튼 누르면 메뉴나오기^^ [1] 처절초보 2003.06.16
Top, Back 함께사용하기 file sharim 2003.06.11
자바스크립트로 두개 이상의 페이지 동시에 열기. [4] 이성헌 2003.06.08
엔터키 걸러내고 코멘트 무조건 10자이상으로 하게하는 자바스크립트 소스 [9] 교행사랑 2003.06.06
오른쪽마우스 클릭금지,드래그금지,하단주소 숨기기 한꺼번에~ [8] 한길 2003.06.03
크롬리스(Chromless) 웹어플리케이션 -6 (최종) [4] sundew 2003.05.30
메뉴 옆에서 화살표가 스크롤되는.. [2] 힘찬연못 2003.05.29
크롬리스(Chromless) 웹어플리케이션 -5 [3] sundew 2003.05.28
스크롤되는 레이어 나두 갖구 싶어서 ^^; 맹글어 봤습니다. [10] M@xPond 2003.05.28
오른쪽 버튼 클릭시 북마크창 띄우기(1석2조 방식) [4] RedEye(rinja) 2003.05.23
크롬리스(Chromless) 웹어플리케이션 -4 [4] sundew 2003.05.23
손님컴퓨터에 내홈피 즐겨찾기 원클릭으로추가시키기 [5] 호호짱 2003.05.23
크롬리스(Chromless) 웹어플리케이션 -3 [5] sundew 2003.05.21
오늘 날짜와 시간 [3] Brown 2003.05.20
태그 쓰기