웹마스터 팁
이미지 줌 아웃슬라이드
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나오네요. 적용한곳보고 무엇인지 따라해보려했는데... -
맨발
2008.02.10 08:42
윗분같이 사진많이 쓰는분 같으면 딱이겠네요.
네가해보니 사진 (이미지) 수백장 아니 수천장을 저장해 불러올수가 있네요
ㅎㅎㅎㅎ 제컴터가 아주고물이고( 한13년)된나
돈이없어 공짜서버을 쓰다보니 다운이 되버렸네요
미안합니다.^^*
((((그리고 제가 올릴줄 몰라서 그러나 이게시판에 프레임 태그가 안되나바요 분명이 제 게시판에 올려보고 했는대?)
암튼 또 자체서버라 컴을 끄면 파킹페이지가 뜸니다.
종일 컴을 켜 놀수도없구(((돈돈돈 ^^*)))그냥 심심풀이로 하는거라~~` -
제주사랑
2008.02.10 10:23
무료 계정 사용하세요.. http://isfreeweb.com 요기 무료계정 주던데요.
저는 저곳에서 무료계정 받아서 테스트 계정 으로 사용하고있어요.
단점이라면 files 폴더 삭제 안되서 운영자 에게 삭제 부탁 해야 되요. -
펜잘
2011.04.27 10:13
// 아래와 같은 순서로 이미지주소를 넣어주세요
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인지 모르겠네요...
아시는분 설명좀 해주시면 감사해요..^__^
제목 | 글쓴이 | 날짜 |
---|---|---|
각 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] | 대암지기 | 2008.02.03 |
본인외 회원정보 제어 [1] | edgarkim | 2008.02.03 |
BGM 등을 배경을 투명하게 iframe 으로 넣는 팁 [3] | 푸른커튼 | 2008.02.05 |
왼쪽메뉴줄이고 오른쪽에 박스만들어 내용쉽게넣기 [15] | plruto | 2008.02.07 |
주소끝에 /zbxe 안적어도 홈페이지에 바로 들어오게 하는법?? [10] | 박태훈922 | 2008.02.07 |
HTTP 406 Error 가 나오면서 업로드 안될때 [16] | plruto | 2008.02.08 |
아날로그 플래시 시계 10종류 (홈페이지, 블로그용) | 푸른커튼 | 2008.02.09 |
이미지 줌 아웃슬라이드 [4] | 맨발 | 2008.02.10 |
로그인후 보여줄 페이지 설정 [4] | 권인해 | 2008.02.11 |
회원가입 생일 필수로 입력받고, 관리자페이지 회원목록에 회원생일 출력하기 [10] | 대암지기 | 2008.02.11 |
제로보드용 플래시시계 위젯 설치방법 | 푸른커튼 | 2008.02.12 |
드림위버 등에서 레이아웃 편집시에.. [3] | 은진아빠 | 2008.02.12 |
특정게시판, 비밀글로 작성하기 [19] | 대암지기 | 2008.02.13 |
전에 누군가 찾았던 것인데..새로고침시 현재페이지로 [2] | 강영곤 | 2008.02.14 |
zbXE User Guide - 3차수정 [3] | 캬캬캬캬캬캬 | 2008.02.16 |
[전면수정]회원가입시 기본 정보공개 여부 체크하기(2) 스킨부분 | 대암지기 | 2008.02.17 |