웹마스터 팁
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
-
고냉이 콱!
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
야~ 멋져요! 담번 홈피 만들땐 이 방법을 사용해봐야겠어요 ^^