웹마스터 팁
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
제목 | 글쓴이 | 날짜 |
---|---|---|
나만의 미니홈 만들기 ㅡ 메인 기초 설계 .home.php [12] | 예뜨락 | 2004.11.17 |
나만의 미니홈 만들기 ㅡ 메인 기초 설계2 .레이아웃 | 예뜨락 | 2004.11.18 |
나만의 미니홈 만들기 ㅡ 메인 기초 설계3 .레이아웃 [2] | 예뜨락 | 2004.11.19 |
나만의 미니홈 만들기 ㅡ 기초적인 관리 페이지 [3] | 예뜨락 | 2004.11.20 |
나만의 미니홈 만들기 ㅡ 미니홈 생성 페이지 [3] | 예뜨락 | 2004.11.20 |
나만의 미니홈 만들기 ㅡ 게시판의 디자인 | 예뜨락 | 2004.11.22 |
나만의 미니홈 만들기 ㅡ 게시판 list.php 파일의 모양새 [6] | 예뜨락 | 2004.11.23 |
나만의 미니홈 만들기 ㅡ list.php , 디비 테이블 생성 [6] | 예뜨락 | 2004.11.26 |
나만의 미니홈 만들기 ㅡ view.php 파일과 제목링크 [9] | 예뜨락 | 2004.11.27 |
나만의 미니홈 만들기 ㅡ write.php 파일과 write_ok [5] | 예뜨락 | 2004.11.30 |
실명 진위여부 확인 [10] | piasol | 2004.12.01 |
개판 오분전 라인 그래프 [4] | 미친개 | 2004.12.01 |
'참조'에 관한 간단한 예제 | 플로렐라 | 2004.12.09 |
4. 쿼리문 [6] | 티다 | 2004.12.11 |
나만의 미니홈 만들기 ㅡ메뉴에 게시판 연결 [5] | 예뜨락 | 2004.12.17 |
IE 에서도 투명 알파값이 적용된 PNG 이미지를 맘껏 활용하자! [8] | THE PAPER™ | 2004.12.27 |
"를 그냥 사용하기 [3] | 추천대화상대 | 2005.01.02 |
나만의 미니홈 만들기 ㅡ delete.php 파일 [2] | 예뜨락 | 2005.01.03 |
퍼미션을 보기좋게 구하자! [4] | 플로렐라 | 2005.01.03 |
PHP 왕초보 입문기(총괄) [4] | 하나둘 | 2005.01.15 |