웹마스터 팁

  2. Support
  3. 웹마스터 팁

레이아웃에 스크립트를 이용한 화면을 띄우고 싶은 경우

2008.06.03 08:20

dhseo

기본적으로 iframe을 사용하기에 원치 않는 분은 수정하지 말아주세요

지금 아래 적혀있는 코드는 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/ 하위에 집어 넣으시면 됩니다.

이 게시물을
좋아요(+1)
목록
제목 글쓴이 날짜
레이아웃에 스크립트를 이용한 화면을 띄우고 싶은 경우 [3] dhseo 2008.06.03
1.0.3버전 외부 페이지 쿼리 스트링 붙일때 주의 하세요. 그라미 2008.06.03
일정 기간이 지난 글에 코멘트 등록 제한 [3] file 老姜君 2008.06.03
링크 사이트 제작을 위한 어드바이스 - Planning 1 - [7] file Hammer 2008.06.04
링크 사이트 제작을 위한 어드바이스 - Planning 2 - [6] file Hammer 2008.06.04
1.03버전 글쓸때 오류... [1] 화려한 부활 2008.06.05
링크 사이트 제작을 위한 어드바이스 - Fade In MouseOver - [3] file Hammer 2008.06.06
(위젯) 이미지 클라우드 스킨 사용 법 [2] file Simulz 2008.06.06
PHP 폼메일 [9] file 헥토르 2008.06.09
링크 사이트 제작을 위한 어드바이스 - MouseOver Preview - [6] file Hammer 2008.06.10
설치시 초기화면으로 돌아가는 문제 해결방법 [4] PICSTORY™ 2008.06.11
☆조회수.추천수 구간에 따른 이미지 나타내기(Hot 등..) - 갤러리게시판&최근이미지위젯☆ [5] 오기오기 2008.06.12
페이지 숫자에 네이버처럼 사각테두리 씌우기 [8] file 탑심 2008.06.15
할수 있다!! 내 맘대로 DB주무르기 ★DB방식 변경★ 토리세상 2008.06.16
페이지 작성이나 수정후 적용이 안돼서 고생하는 많은 분들을 위하여 [1] cyric 2008.06.17
설치후 권한 재조정 [4] 덱스터 2008.06.17
아이프레임속 링크를 기존페이지에서 이동하기 [1] file 정다운804 2008.06.19
업그레이드 쉽고,안전하게 하기 [5] wannabewize 2008.06.21
Autolink에 주소 복사 추가 & 본문 글 주소 복사 추가 [4] file 탑심 2008.06.22
[1원짜리팁] 큰 이미지 썸네일 못생성& 확장변수 원하는 곳에 배치하기 ^^ [2] 파파민 2008.06.23
태그 쓰기