웹마스터 팁

  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>




괜찮으면 추천버튼 꾸욱~ ^^
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
리눅스 보안 : 기초적인 방화벽 : portsentry 설치하기 [2] 정인배 2002.11.29
cron을 이용한 자동 백업 받기 최종우 2002.12.02
cron과 rsync 그리고 replication 을 이용한 데이터 백업 [3] 최종우 2002.12.03
FTP 를 이용한 원격 백업 받기 [5] 최종우 2002.12.04
[계정삭제 스크립터] 편리님이 만드신 계정추가랑 연동됩니다. [4] file 김동현 2002.12.04
[FreeBSD] 자동으로 시간 맞추기.. [1] DeX™ 2002.12.04
계정 등록 스크립트 [8] 편리 2002.12.05
오래간만에 찾아뵙는군요^^ [2] Dopesoul 2002.12.08
Zend Optimizer Full Pass Setup [3] DukeEYS 2002.12.08
mod_gzip 적용시 php 인클루드를 실패해서 포기하신분 보세요 [2] DukeEYS 2002.12.08
apache2 + mod_jk 100번의 닭질 끝에 찾아가는 사이트 DukeEYS 2002.12.09
[FreeBSD] Proftp + MySQL 연동 설치하기 [2] file DeX™ 2002.12.09
레드햇(redhat)리눅스에서 rpm 관리 명령어 정인배 2002.12.09
srpms, alpha, i386 , i686 이 의미하는 것은? [1] Dopesoul 2002.12.12
누군가 우리서버를 공격하고 있을때 응급처치! [13] Dopesoul 2002.12.13
[re] 저의 최종의견 입니다. [5] Dopesoul 2002.12.17
SetEnvIf 와 SetEnvIfNocase 의 차이 [7] Dopesoul 2002.12.13
DeX 님의 시간 동기화 스크립트를 편하고 안정적으로 변경한 리눅스용! [4] Dopesoul 2002.12.13
리눅스 rpm 명령어 활용(1): MRTG 설치 정인배 2002.12.14
PHP 4.2.3 파워 설치 테크닉 (에러 0%에 도전) [2] 밍밍이 2002.12.17
태그 쓰기