웹마스터 팁
이미지 줌 아웃슬라이드
2008.02.10 00:18
혹시 필요하신분이 있을까봐 올림니다 사진불러오기는 그만이네요
적용된 곳 -- http://pmh219.webkebi.co.kr/zbxe.html
우선메모장을 열어파일을 하나만들어 자신에 계정에 올립니다(파일)( 이름.html)
그런다음 에디터로 메모장을 열어서 아래소스을 복사해넣읍니다
그리고 밑에 아이 프레임으로 불러와 적당한곳에 넣어주시면 됩니다
<iframe style="border:8px double #CCCCCC" frameborder="no" width=230 height=135
scrolling=no src="주소"></iframe>
<!--여기서 부터 소스 시작입니다-->
<html>
<HEAD>
<title>이미지 줌아웃슬라이드</title>
</HEAD>
<BODY BGCOLOR="#000000">
<script type="text/javascript">
<!--
// 아래와 같은 순서로 이미지주소를 넣어주세요
pics=new Array()
pics[0]="pics[2]="http://pmh219.webkebi.co.kr/img1/3.jpg"
pics[1]=""
pics[2]=""
pics[3]=""
pics[4]=""
// 얼마든지 추가가능합니다
pause=3 // 이미지교체 타이밍(단위:초)
step= 6 // 이미지교체 프레임
// 이하 수정할 부분 없슴.....!
function initslide(){
document.getElementById("pic_one").width=1
document.getElementById("pic_two").width=240 // 이미지세로크기조절가능
p1x=parseInt(document.getElementById("pic_one").style.left)
p1w=document.getElementById("pic_one").width
p2w=document.getElementById("pic_two").width
document.getElementById("pic_one").src=pics[1]
document.getElementById("pic_two").src=pics[0]
posx=p1x
w1=0
w2=p2w
num=0
picnum=2
animate()
}
function animate(){
if(picnum>pics.length-1){picnum=0}
posx+=step
w1+=step
w2-=step
timer=setTimeout("animate()",50)
if(num==0){
document.getElementById("pic_one").style.width=w1
document.getElementById("pic_two").style.width=w2
document.getElementById("pic_two").style.left=posx
if(w2<step){
document.getElementById("pic_two").style.left=p1x
document.getElementById("pic_two").style.width=p1w
document.getElementById("pic_two").src=pics[picnum++]
posx=p1x
w1=0
w2=p2w
num=1
clearTimeout(timer)
setTimeout("animate()",pause*1000)
}
}
if(num==1){
document.getElementById("pic_two").style.width=w1
document.getElementById("pic_one").style.width=w2
document.getElementById("pic_one").style.left=posx
if(w2<step){
document.getElementById("pic_one").style.left=p1x
document.getElementById("pic_one").style.width=p1w
document.getElementById("pic_one").src=pics[picnum++]
posx=p1x
w1=0
w2=p2w
num=0
clearTimeout(timer)
setTimeout("animate()",pause*1000)
}
}
}
//-->
</script>
<BODY onload="initslide()">
<img src="1번이미지폴더주소" id="pic_one" alt="1" style="position:absolute; left:0px; top:0px; z-index:1">
<img src="2번이미지폴더주소" id="pic_two" alt="2" style="position:absolute; left:0px; top:0px; z-index:1">
</body>
</html>
<!--여기까지 복사 이용하세요-->
댓글 4
-
cocobulls
2008.02.10 05:21
parking page나오네요. 적용한곳보고 무엇인지 따라해보려했는데... -
윗분같이 사진많이 쓰는분 같으면 딱이겠네요.
네가해보니 사진 (이미지) 수백장 아니 수천장을 저장해 불러올수가 있네요
ㅎㅎㅎㅎ 제컴터가 아주고물이고( 한13년)된나
돈이없어 공짜서버을 쓰다보니 다운이 되버렸네요
미안합니다.^^*
((((그리고 제가 올릴줄 몰라서 그러나 이게시판에 프레임 태그가 안되나바요 분명이 제 게시판에 올려보고 했는대?)
암튼 또 자체서버라 컴을 끄면 파킹페이지가 뜸니다.
종일 컴을 켜 놀수도없구(((돈돈돈 ^^*)))그냥 심심풀이로 하는거라~~` -
제주사랑
2008.02.10 10:23
무료 계정 사용하세요.. http://isfreeweb.com 요기 무료계정 주던데요.
저는 저곳에서 무료계정 받아서 테스트 계정 으로 사용하고있어요.
단점이라면 files 폴더 삭제 안되서 운영자 에게 삭제 부탁 해야 되요. -
// 아래와 같은 순서로 이미지주소를 넣어주세요
pics=new Array()
pics[0]="pics[2]="http://pmh219.webkebi.co.kr/img1/3.jpg"
pics[1]=""
pics[2]=""
pics[3]=""
pics[4]=""
위에서 왜 pics[0]="pics[2] 에서 0 다음에 2인지 모르겠네요...
아시는분 설명좀 해주시면 감사해요..^__^
