웹마스터 팁
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
-
고냉이 콱!
2003.06.17 18:49
마지막꺼 좋으네요 추천한방..... -
레키™
2003.06.18 17:24
추천! 추천! 추천!
정말 속이 다 시원합니다.
다시 추천! 추천! 추천! -
★죠리퐁은우유에
2003.06.21 08:51
강츄! 원츄! 피카츄!+_+ -
란즈
2003.06.22 18:36
RGB값 변환은 못하나요?? -
오태양
2003.06.28 11:29
감사합니다 (__) -
행복한고니
2003.06.16 13:29
하나비// 일반적인 img 태그 사용법과 동일합니다. ^^
<a href="링크주소"><img src="소스1" overmode="overlay" oversrc="소스2" border="0"></a> -
하나비
2003.06.16 14:31
쌩큐~~~~..^^추천.....ㅎㅎ -
성장
2003.06.17 07:24
나이쑤~~~~~~~~~~ -
하나비
2003.06.16 10:34
<img src="소스1" overmode="overlay" oversrc="소스2">
여기에 target이랑.. 이동할 주소를 링크하는 방법은여? -
귀족차니
2003.09.18 06:49
이미지 미리 불러오는 스크립트도 추가하면 원츄될텐데. -
kadarica
2003.10.17 19:31
추천 꾹!
당장 사용~
마침 리녁중인데 참 잘됐다 ㅋㅋ
ㄱㅅㅎㄴㄷ~ [감사합니다..ㅡ,.ㅡ;;] -
kadarica
2003.10.17 19:31
리녁 >> 리녈...;; -
감자
2003.11.30 02:27
넘 길지 않나요? ........ -
이상은
2004.02.19 10:22
왓..... 진짜 추천합니당.. 제가 사용할 수 있을지.. ^^" -
ⓢun™
2004.03.25 22:53
야~ 멋져요! 담번 홈피 만들땐 이 방법을 사용해봐야겠어요 ^^
제목 | 글쓴이 | 날짜 |
---|---|---|
랜덤 이미지 롤링위젯스킨에서 컬러셋이 적용되지 않는분은 필독!
![]() | xemall | 2011.02.02 |
사이트 모니터링 알리미에요...^^
[3]
![]() | web | 2010.12.10 |
"서버에 요청중..." 메세지 없애기 [3] | SeoSeungHyun | 2011.01.11 |
레이아웃수정시 참고할 zbXe레이아웃스킨의 css와 layout 상관관계(1.0.0 기본스킨)
[21]
![]() | 갯가 | 2008.04.08 |
IE6부터 IE9까지 대응하기. [7] | 정찬명 | 2010.10.13 |
탈퇴회원 아이디 재사용 막는 법 [5] | 한꼬마 | 2011.01.18 |
XE 기본 서식 - 검정 바탕용 : p, div, br 없는 기본 서식입니다.
[5]
![]() | LutZ | 2010.07.01 |
홈페이지 브라우저 크기 고정시키기 | 코아 코스튬 | 2011.01.30 |
XE 속도 0.0001초라도 올리는 소소한 팁들 (추가) [5] | 소렌트. | 2010.11.16 |
좋은 PHP 강좌 사이트들 [1] | HolyJohn | 2010.12.29 |
?=down [4] | L-Goon | 2009.01.19 |
(게시물, 서명) 원하는 곳에 서명 출력하기
[10]
![]() | Simulz | 2007.10.08 |
'대표도메인'연결후 '로그인'이 안될때,,(먹통) | moonlight994 | 2011.01.24 |
회원확장정보 변수 (출처:sMaker) [5] | 시니시즘 | 2010.07.19 |
로그인 폼에 관리자는 [Admin] 나타나게 하기
[4]
![]() | 오스카 | 2009.10.10 |
두개 이상의 홈페이지 운영 - Virtual host 설정 [1] | 이성헌 | 2005.12.15 |
좋은 레이아웃 찿으시는 분들 선우님이 새로 또 하나의 좋은 레이아웃을 만드 셨네요... [2] | 유샤인 | 2011.01.21 |
[ 도움요청 ] 게시판 리스트에서 작성한 사람만 작성한 리스트가 보이는 방법 ?? | 잘살아서복수!! | 2011.01.20 |
XE에서 레이아웃이나 기타의 페이지에 include 사용에 대한 오해??? [3] | DuRi | 2011.01.18 |
앞으로 공용선택자 사용은 그만.... [5] | ForHanbi | 2010.11.23 |