웹마스터 팁
page_full_width">
레이아웃에 스크립트를 이용한 화면을 띄우고 싶은 경우
2008.06.03 08:20
기본적으로 iframe을 사용하기에 원치 않는 분은 수정하지 말아주세요
지금 아래 적혀있는 코드는 layout.html 에 iframe을 이용해서 로고를 넣고
로고는 기본적으로 n개의 이미지로 슬라이드 쑈를 하는.. 자바 스크립트 파일입니다.
이미지나 결과물은 저작권 문제로 첨부하지 않습니다.
회사에서 사용하는 거라. ^^
레이 아웃 파일에서 로고 부분을 다음과 같이 수정 (layouts/xxxx/layout.html)
지금 아래 적혀있는 코드는 layout.html 에 iframe을 이용해서 로고를 넣고
로고는 기본적으로 n개의 이미지로 슬라이드 쑈를 하는.. 자바 스크립트 파일입니다.
이미지나 결과물은 저작권 문제로 첨부하지 않습니다.
회사에서 사용하는 거라. ^^
레이 아웃 파일에서 로고 부분을 다음과 같이 수정 (layouts/xxxx/layout.html)
<!-- 로고설정 --> <iframe src= "/layouts/xxxx/leftFrame/slideshow.html" width=249 height=207 frameborder=0 border=0 align=right noframe allowTransparency= "true" scrolling= "No" > </iframe> |
iframe src="/layouts/xxxx/leftFrame/slideshow.html"
여기서 xxxx는 스킨 폴더라시는거 아시죠??
leftFrame이라는 폴더를 만들어서 슬라이드 쇼를 하는 html 코드를 삽입시킨 경우입니다.
ps. 이미지는, 저작권 때문에 첨부를 하지 못합니다.
./layouts/xxxx/leftFrame/slideshow.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <SCRIPT SRC= "frame_Left.js" ></SCRIPT> <!-- <script> if (ie4||dom) document.write( '<div style="position:relative;width:' +slideshow_width+ ';height:' +slideshow_height+ ';overflow:hidden"><div id="canvas0" style="position:absolute;width:' +slideshow_width+ ';height:' +slideshow_height+ ';top:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:' +slideshow_width+ ';height:' +slideshow_height+ ';top:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>' ) else document.write( '<img name="defaultslide" src="' +fadeimages[0]+ '">' ) </script> --> <script> if (ie4||dom) document.write( '<div style="position:absolute;top:0;left:0;width:' +slideshow_width+ ';height:' +slideshow_height+ ';overflow:hidden"><div id="canvas0" style="position:absolute;width:' +slideshow_width+ ';height:' +slideshow_height+ ';top:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:' +slideshow_width+ ';height:' +slideshow_height+ ';top:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>' ) else document.write( '<img name="defaultslide" src="' +fadeimages[0]+ '">' ) </script> |
./layouts/xxxx/leftFrame/frame_Left.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | var curpos=10 var curcanvas= "canvas0" var curimageindex=0 var nextimageindex=1 var fadeimages= new Array() var slideshow_width=247 // image width var slideshow_height=207 // image height var pause=2500 // speed (3000=3 seconds) // image list fadeimages[0]= "./main_02.jpg" fadeimages[1]= "./main_03.jpg" fadeimages[2]= "./main_04.jpg" fadeimages[3]= "./main_05.jpg" fadeimages[4]= "./main_06.jpg" fadeimages[5]= "./main_07.jpg" fadeimages[6]= "./main_08.jpg" fadeimages[7]= "./main_09.jpg" fadeimages[8]= "./main_10.jpg" fadeimages[9]= "./main_11.jpg" fadeimages[10]= "./main_12.jpg" fadeimages[11]= "./main_01.jpg" var ie4=document.all&&navigator.userAgent.indexOf( "Opera" )==-1 var dom=document.getElementById&&navigator.userAgent.indexOf( "Opera" )==-1 function fadepic(){ if (curpos<100){ curpos+=10 if (tempobj.filters) tempobj.filters.alpha.opacity=curpos else if (tempobj.style.MozOpacity) tempobj.style.MozOpacity=curpos/100 } else { clearInterval(dropslide) nextcanvas=(curcanvas== "canvas0" )? "canvas0" : "canvas1" tempobj=ie4? eval ( "document.all." +nextcanvas) : document.getElementById(nextcanvas) tempobj.innerHTML= '<img src="' +fadeimages[nextimageindex]+ '">' nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0 setTimeout( "rotateimage()" ,pause) } } function rotateimage(){ if (ie4||dom){ resetit(curcanvas) var crossobj=tempobj=ie4? eval ( "document.all." +curcanvas) : document.getElementById(curcanvas) crossobj.style.zIndex++ var temp= 'setInterval("fadepic()",50)' dropslide= eval (temp) curcanvas=(curcanvas== "canvas0" )? "canvas1" : "canvas0" } else document.images.defaultslide.src=fadeimages[curimageindex] curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0 } function resetit(what){ curpos=10 var crossobj=ie4? eval ( "document.all." +what) : document.getElementById(what) if (crossobj.filters) crossobj.filters.alpha.opacity=curpos else if (crossobj.style.MozOpacity) crossobj.style.MozOpacity=curpos/100 } function startit(){ var crossobj=ie4? eval ( "document.all." +curcanvas) : document.getElementById(curcanvas) crossobj.innerHTML= '<img src="' +fadeimages[curimageindex]+ '">' rotateimage() } if (ie4||dom) window.onload=startit else setInterval( "rotateimage()" ,pause) |
fadeimages[] 에 있는 부분이 이미지 파일들입니다.
이미지는
./layouts/xxxx/leftFrame/ 하위에 집어 넣으시면 됩니다.
댓글 3
-
여등
2008.06.06 01:16
-
dhseo
2008.06.10 08:37
document write 에 포함된 부분을 수정하면 되겠내요
아래와 같이..예를 들어봅니다.! 절대 그대로 사용하지 마세요
test는 안해봤습니다.
./layouts/xxxx/leftFrame/slideshow.html
- <SCRIPT SRC="frame_Left.js"></SCRIPT>
- <!--
- <script>
- if (ie4||dom)
- document.write('<a href ="targeturl"><div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+'+ ';height:'+slideshow_height+';top:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div></a>')
- else
- document.write('<a href="targeturl"><img name="defaultslide" src="'+fadeimages[0]+'"></a>')
- </script>
- -->
- <script>
- if (ie4||dom)
- document.write('<a href ="targeturl"><div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div></a>')
- else
- document.write('<a href="targeturl"><img name="defaultslide" src="'+fadeimages[0]+'"></a>')
- </script>
-
여등
2008.06.11 18:52
제목 | 글쓴이 | 날짜 |
---|---|---|
보안로그인 사용시 기본포트가 아닐 경우 [2] | bluemind69 | 2008.05.20 |
글 쓸 때 자동으로 비밀 글 체크하기(''비고수''님의 팁) [1] | 띵야 | 2008.05.20 |
버튼 글씨체 바꾸기.... [2] | winter548 | 2008.05.20 |
태그 위젯으로 생성된 태그 리스트에서 한글태그 검색이 안될때 해결법 [3] | 봄대리 | 2008.05.21 |
배경음악 넣기(ZBXE를 기본폴더에 설치한 경우) [4] | 백성찬 | 2008.05.26 |
IE6 한글도메인에 ZBXE 때문에 속 썩이시는 분 [1] | 햇살과수원 | 2008.05.26 |
설문조사에서 로그인하지 않은 사용자는 투표하지 못하도록 수정하기 [3] | mooo | 2008.05.29 |
제로보드와 플래시 게시판 연동해서 사용하기 [5] | Park Ki-tae | 2008.05.30 |
제로보드4 스타일 이전글/다음글 구현하기 (라르게덴님 팁 재탕)
[12]
![]() | 老姜君 | 2008.05.30 |
본문글 하단 목록 옵션 처리하기
[4]
![]() | 老姜君 | 2008.05.31 |
회원 가입시 admin이 가입 승인이후 동작시키도록 변경!! [1] | dhseo | 2008.06.02 |
레이아웃에 스크립트를 이용한 화면을 띄우고 싶은 경우 [3] | dhseo | 2008.06.03 |
1.0.3버전 외부 페이지 쿼리 스트링 붙일때 주의 하세요. | 그라미 | 2008.06.03 |
일정 기간이 지난 글에 코멘트 등록 제한
[3]
![]() | 老姜君 | 2008.06.03 |
링크 사이트 제작을 위한 어드바이스 - Planning 1 -
[7]
![]() | Hammer | 2008.06.04 |
링크 사이트 제작을 위한 어드바이스 - Planning 2 -
[6]
![]() | Hammer | 2008.06.04 |
1.03버전 글쓸때 오류... [1] | 화려한 부활 | 2008.06.05 |
링크 사이트 제작을 위한 어드바이스 - Fade In MouseOver -
[3]
![]() | Hammer | 2008.06.06 |
(위젯) 이미지 클라우드 스킨 사용 법
[2]
![]() | Simulz | 2008.06.06 |
PHP 폼메일
[9]
![]() | 헥토르 | 2008.06.09 |
각 그림마다 그림을 클릭하면 특정 화면으로 가게 할려면 어디를 수정하면 될련지요?