태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

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

홈페이지

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>

추천 목록

번호	제목
215	오늘 날짜와 요일 넣기
214	텍스트 상자에서 메세지가 타이핑 됩니다
213	전체화면으로 페이지 열기
212	채널모드로 윈도우 열기
211	일반적인 형태의 전체크기 윈도우 열기
210	마우스를 대기만 해도 다른 사이트로 이동합니다
209	마우스를 대기만 하면 팝업창을 엽니다
208	이미지나 버튼 클릭시 생기는 점선 없애기
207	풀 스크린 띄우는 자바
206	새창띄우기의 변종..
205	날짜 카운터! 커플홈에 강추!!
204	플래시 크기 바꾸기 [IE/NS 겸용]
203	새창 띄운후 부모창 확인없이 닫기...
202	링크된 곳 포커스(점선박스) 없애기
201	자바스크립트로 두개 이상의 페이지 동시에 열기.
200	오른쪽마우스 클릭금지,드래그금지,하단주소 숨기기 한꺼번에~
	손쉬운 롤오버 이미지 자동생성
198	웹에서그림그리기
197	이미지 필터를 사용한 간단한 소스
196	한줄씩 올라가는 뉴스티거용
195	초강력 울트라..매가톤 간단...랜덤이미지..
194	메인 접속하면 할아버지 나오는...
193	창 이동시 경고 메세지 띄우기...!;;;
192	뒤로,앞으로,중지,홈으로 버튼 만들기...
191	이미지에 스포트라이트 효과주기...
190	입력박스에 입력한 주소로 이동하기...
189	홈페이지에 FTP 폼 넣기
188	창만 화면 가득 꽉차게....
187	풀스크린
186	원하는시간에 팝업창을 띄우고 닫을수 있는소스...^^