웹마스터 팁

  2. Support
  3. 웹마스터 팁

이미지 줌 아웃슬라이드

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>


<!--여기까지 복사 이용하세요-->

이 게시물을
Profile
좋아요
목록
제목 글쓴이 날짜
각 OS별 브라우저별 자신의 웹사이트 보기??? [12] 세바스챤_™ 2008.01.31
리눅스 호환 호스팅에서 zbxe 전체 업로드 후 디렉토리 이동시키기... [4] 소마세월 2008.02.02
포인트 수정없이 원하는 레벨 아이콘이나 원하는 이미지 출력하기(0.29용) [20] 지연아빠 2008.02.02
flash <=> xe menu 연동 [7] tsana 2008.02.03
특정 게시판, 업로드된 그림 자동으로 본문에 출력하기 [14] file 대암지기 2008.02.03
본인외 회원정보 제어 [1] edgarkim 2008.02.03
BGM 등을 배경을 투명하게 iframe 으로 넣는 팁 [3] 푸른커튼 2008.02.05
왼쪽메뉴줄이고 오른쪽에 박스만들어 내용쉽게넣기 [15] file plruto 2008.02.07
주소끝에 /zbxe 안적어도 홈페이지에 바로 들어오게 하는법?? [10] 박태훈922 2008.02.07
HTTP 406 Error 가 나오면서 업로드 안될때 [16] file plruto 2008.02.08
아날로그 플래시 시계 10종류 (홈페이지, 블로그용) file 푸른커튼 2008.02.09
이미지 줌 아웃슬라이드 [4] 맨발 2008.02.10
로그인후 보여줄 페이지 설정 [4] 권인해 2008.02.11
회원가입 생일 필수로 입력받고, 관리자페이지 회원목록에 회원생일 출력하기 [10] 대암지기 2008.02.11
제로보드용 플래시시계 위젯 설치방법 file 푸른커튼 2008.02.12
드림위버 등에서 레이아웃 편집시에.. [3] 은진아빠 2008.02.12
특정게시판, 비밀글로 작성하기 [19] file 대암지기 2008.02.13
전에 누군가 찾았던 것인데..새로고침시 현재페이지로 [2] 강영곤 2008.02.14
zbXE User Guide - 3차수정 [3] file 캬캬캬캬캬캬 2008.02.16
[전면수정]회원가입시 기본 정보공개 여부 체크하기(2) 스킨부분 대암지기 2008.02.17
태그 쓰기