자바스크립트로 이미지 부드럽게 변경하기
홈페이지를 보면 두개의 이미지가 부드럽게 바뀌는 것을 자주 볼 게 된다.
엄청 어려운 기술로만 생각을 했는데 자바스크립트에서 단 몇 줄만 넣으면
부드럽게 바뀌는 이미지가 만들어진다는 것에 난 당혹감을 감추지 못하였다.....;; 헐;;
소스코드는 아래와 같다.
[CODE type=html4strict]<html>
<head>
<script>
function startTrans(){
faceoff.filters.blendTrans.Apply();
faceoff.src="face_2.gif"
faceoff.filters.blendTrans.play();
}
</script>
</head>
<body onLoad=startTrans()>
잠시 기다리시면...<br>
효과를 보실수 있습니다. 잠시만 기다려 주세요.<br>
<img src="face_1.gif" id=faceoff style="filter:blendTrans(duration=10)">
</body>
</html>[/CODE]
<head>
<script>
function startTrans(){
faceoff.filters.blendTrans.Apply();
faceoff.src="face_2.gif"
faceoff.filters.blendTrans.play();
}
</script>
</head>
<body onLoad=startTrans()>
잠시 기다리시면...<br>
효과를 보실수 있습니다. 잠시만 기다려 주세요.<br>
<img src="face_1.gif" id=faceoff style="filter:blendTrans(duration=10)">
</body>
</html>[/CODE]
첨부된 아래의 예제 파일을 받고 실행 해보라... 놀랍다.
script183.zip스무스 이미지 변경 예제
간단하게 소수 분석을 하자면 IMG 태그에서 style옵션에 duration=10은 10초동안
두개의 이미지가 변경되는 것을 의미하는 것이다.
faceoff.filters.blendTrans.Apply();
은 현재 faceoff라는 IMG에 있는 이미지를 고정시키고 있다가
faceoff.src="face_2.gif"
이미지를 face_2.gif로 변경하고
faceoff.filters.blendTrans.play();
이제 Apply함수 수행했을때 이미지랑 최근에 바뀐 이미지로 변환하는 것을
시작하라(play)는 명령이다.
이런 좋은 소스를 무료로 제공해주신 분께 최소한의 예의로 아래에 출처와
소스코드의 변수명을 변경하지 않고 그대로 올렸습니다~
출처 : http://cbkim.wkhc.ac.kr/
며루치님의 블로그글