웹마스터 팁
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
야~ 멋져요! 담번 홈피 만들땐 이 방법을 사용해봐야겠어요 ^^
제목 | 글쓴이 | 날짜 |
---|---|---|
모듈 선택기에서 선택이 안되는 문제해결. | 모글리만세 | 2011.04.22 |
QRCode 이미지를 줄여서 깔끔하게사용하는 법~ [2] | 포토올/wow | 2011.04.18 |
갑자기 관리자 페이지가 안보이거나 330 오류가 날 때는 이렇게 해결!
[2]
![]() | 세라오빠 | 2011.04.13 |
(1.4.5 버전 이상) XE가 설치된 사이트 찾기 [1] | SMaker | 2011.04.17 |
댓글 쪽지 알림시 원본글 URL 설정 [1] | unnumiya | 2011.04.15 |
1.4.5.2로 업데이트 후 짧은 주소가 제대로 되지 않으실때...
[8]
![]() | 라르게덴 | 2011.04.12 |
다솜플레이어창은 뜨는데 연결중에서 더이상 안넘어가요 | 탱7 | 2011.04.15 |
1.4.4.2부터 게시판 신규게시물 작성이 안되던 문제 [2] | 운상유희 | 2011.03.25 |
업데이트 어떻게 해야 오류 없이 되나요? [1] | 김농주 | 2011.04.12 |
텍스타일 카테고리 글목록수 수정 | 신군임니돠 | 2011.04.12 |
제로보드 XE - 오토셋에 설치하기
[11]
![]() | 차오이 | 2007.08.11 |
레이아웃에 소스추가해서 트래픽보기!
[2]
![]() | 막시민 | 2011.03.07 |
회원가입폼 내멋대로 내맘대로 하기. [9] | 지인짜 | 2010.08.04 |
[모바일] 모바일웹에서 Pc버전갔다가 다시 모바일버전으로 갈라면 [1] | 푸름빠 | 2011.04.07 |
XE로 API 처리 완전 정복하기(2)
[2]
![]() | 라르게덴 | 2009.11.03 |
P 개행처리를 BR처럼 | Garon | 2011.04.04 |
데이터이전 회원관련해서 알아야 할 사항 [2] | 푸름빠 | 2011.04.03 |
[PHP 기초] 변수, 상수 [2] | 난다날아 | 2011.03.24 |
관리자페이지 레이아웃에 게시판을 달아보자 [3] | 푸름빠 | 2011.03.29 |
"현재 xe코어1.4.4.4버전에서는 익스플로어에서 페이지수정 등의 작업을 할때 에러가 자주 발생하곤 합니다." | 유샤인 | 2011.03.29 |