웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
손쉬운 롤오버 이미지 자동생성
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>
괜찮으면 추천버튼 꾸욱~ ^^
그냥 이미지 태그에 적절한 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>
괜찮으면 추천버튼 꾸욱~ ^^
댓글 15
제목 | 글쓴이 | 날짜 |
---|---|---|
엔터키 걸러내고 코멘트 무조건 10자이상으로 하게하는 자바스크립트 소스 [9] | 교행사랑 | 2003.06.06 |
자바스크립트로 두개 이상의 페이지 동시에 열기. [4] | 이성헌 | 2003.06.08 |
Top, Back 함께사용하기
![]() | sharim | 2003.06.11 |
[스크립트]오른쪽 버튼 누르면 메뉴나오기^^ [1] | 처절초보 | 2003.06.16 |
[스크립트] 메뉴에 마우슬 데면 서브 메뉴가 나온다 [2] | 처절초보 | 2003.06.16 |
손쉬운 롤오버 이미지 자동생성 [15] | 행복한고니 | 2003.06.16 |
웹에서그림그리기 [5] | 카이저 | 2003.06.27 |
아이프레임으로 나타낸 문서를 크기에 맞게 자동으로 사이즈 조절 [3] | DODGE | 2003.06.28 |
제로보드 사용시 아이프레임의 크기를 내용에 따라 바꿔주는 스크립트 [7] | 쿨리안 | 2003.06.28 |
마우스 오른쪽 버튼 누르면 원하는 메뉴 뜨게 만들기(다른사이트) [3] | 김주형 | 2003.07.03 |
상태바에 2개의 메세지가 뜨는 태그 | 김주형 | 2003.07.03 |
이미지 필터를 사용한 간단한 소스 [3] | NzeoZen | 2003.07.06 |
한줄씩 올라가는 뉴스티거용 인데요....제로보드하구는 어케...쩝 [12] | 하나비 | 2003.07.08 |
노프레임 홈페이지 수정 편리하게 &용량줄이기. [9] | 세죠위그이 | 2003.07.15 |
초강력 울트라..매가톤 간단...랜덤이미지.. [6] | 김한샘 | 2003.07.24 |
HTML경고창 [수정#2] [14] | [락위듀]아렌티 | 2003.07.26 |
나름대로 만들어본 가운데 팝업 스크립트 [3] | phase | 2003.07.31 |
Marquee 태그를 이용한 간단한 스크립트 [7] | 뒹굴리스트 | 2003.08.06 |
편리한 컴내꺼 포트개방 (com.ne.kr FTP Port Open) [1] | phase | 2003.08.16 |
배경도 이제 선택한다!!? [2] | NzeoZen | 2003.08.16 |