태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

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

홈페이지

20년 전

그냥 이미지 태그에 적절한 overmode 와 적절한 oversrc 를 써주면 자동으로 롤오버 효과를 줍니다.

// overmode 값
//     없으면 일반적인 롤오버
//     gray_color : 흑백상태에서 오버하면 칼라로. 원본이미지가 칼라일 것.
//     color_gray : 칼라상태에서 오버하면 흑백으로. 원본이미지가 칼라일 것.
//     overlay : 서로 겹쳐지며 변환
// oversrc : 변환될 이미지의 URL
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">
과 같은 형식으로 사용하시면 됩니다.

사용예제 :

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

추천 목록

번호	제목
22	플래시 크기 바꾸기 [IE/NS 겸용]
21	새창 띄운후 부모창 확인없이 닫기...
20	링크된 곳 포커스(점선박스) 없애기
19	자바스크립트로 두개 이상의 페이지 동시에 열기.
18	오른쪽마우스 클릭금지,드래그금지,하단주소 숨기기 한꺼번에~
	손쉬운 롤오버 이미지 자동생성
16	웹에서그림그리기
15	이미지 필터를 사용한 간단한 소스
14	한줄씩 올라가는 뉴스티거용
13	초강력 울트라..매가톤 간단...랜덤이미지..
12	메인 접속하면 할아버지 나오는...
11	창 이동시 경고 메세지 띄우기...!;;;
10	뒤로,앞으로,중지,홈으로 버튼 만들기...
9	이미지에 스포트라이트 효과주기...
8	입력박스에 입력한 주소로 이동하기...
7	홈페이지에 FTP 폼 넣기
6	창만 화면 가득 꽉차게....
5	풀스크린
4	원하는시간에 팝업창을 띄우고 닫을수 있는소스...^^
3	스크롤바 없애기
2	보턴처리 새창으로 띄우기
1	페이지를 열면 자동으로 다운로드 레디고!