호빵홈 소스자료실
현재위치 : hobbang.co.kr > 소스자료실
소스자료실은 홈페이지를 만들거나 꾸밀 수 있는 자바스크립트와 HTML 소스를 제공합니다.
또한 컴퓨터와 인터넷을 사용하면서 유용한 Tip도 제공하니 각 Category를 선택하세요.

Category

  (Homepage)님의 글입니다.
지정한 여러 그림이 자동으로 변하는 소스 2003-10-03 17:21:21, 조회 : 5,140, 추천 : 58

소스를 가져가는 것은 자유이고 소스 설명을 이해하지 않고 그대로 복사해 가는 경우라면 설명의 출처를 http://hobbang.co.kr 이라고 표기해주시구요.. 자신이 이해하고 이 설명을 참고해서 자신의 홈에 올리는 경우라면 출처 안밝혀도 상관 없습니다.. ^^





◆ 소스
<script language=javaScript>
<!-- Beginning of JavaScript -

document.write('<div id="toplevel" style="position:absolute;visibility:visible;top:10px; left:10px"></div>');

var thissize=25;
var textfont="Verdana";
var textcolor1= "FF6666";
var textcolor2= "888888";
var i_rightclip=550;
var i_message=0;
var maxwidth=800;

var message = new Array();
message[0]="<img src='http://hobbang.co.kr/images/01.gif' border=0>";
message[1]="<img src='http://hobbang.co.kr/images/02.gif' border=0>";
message[2]="<img src='http://hobbang.co.kr/images/03.gif' border=0>";
message[3]="<img src='http://hobbang.co.kr/images/04.gif' border=0>";
message[4]="<img src='http://hobbang.co.kr/images/05.gif' border=0>";
message[5]="<img src='http://hobbang.co.kr/images/06.gif' border=0>";
message[6]="<img src='http://hobbang.co.kr/images/07.gif' border=0>";
message[7]="<img src='http://hobbang.co.kr/images/08.gif' border=0>";
message[8]="<img src='http://hobbang.co.kr/images/09.gif' border=0>";
message[9]="<img src='http://hobbang.co.kr/images/10.gif' border=0>";
message[10]="<img src='http://hobbang.co.kr/images/11.gif' border=0>";
message[11]="<img src='http://hobbang.co.kr/images/12.gif' border=0>";
message[12]="<img src='http://hobbang.co.kr/images/13.gif' border=0>";
message[13]="<img src='http://hobbang.co.kr/images/14.gif' border=0>";

function morewidth() {
 if (i_rightclip <= maxwidth) {
 if(document.all) {
  toplevel.innerHTML="<span style='position:absolute;font-family:"+textfont+";font-size:"+thissize+"pt;color:"+textcolor1+"; clip:rect(2px "+i_rightclip+"px 200px 0px)'>"+message[i_message]+"</span>";
 }
 if(document.layers) {
  document.toplevel.document.write("<span style='position:absolute;font-family:"+textfont+";font-size:"+thissize+"pt;color:"+textcolor1+"; clip:rect(2px "+i_rightclip+"px 200px 0px)'>"+message[i_message]+"</span>");
 }
 i_rightclip=i_rightclip+550;
 var timer=setTimeout("morewidth()",550);
 }
 else {
  document.close();
  clearTimeout(timer);
  i_message++;
  i_rightclip=550;
  if (i_message >= message.length) {i_message=0}
   var intermezzo=setTimeout("morewidth()",550);
 }
}

setTimeout("morewidth()", 1000);
// - End of JavaScript - -->
</script>

위의 박스의 내용이 모두 소스입니다..

소스 내용 중 파란색으로 된 부분만 설명을 합니다.. 그 부분만 고쳐서 사용하면 되거든요..

◆ 소스 설명

  • document.write('<div id="toplevel" style="position:absolute;visibility:visible;top:10px; left:10px"></div>');

    : 그림이 나올 위치랍니다.. top:10px; left:10px 부분의 숫자만 고치세요..
    top:10px 는 화면의 위쪽에서부터 나타날 위치입니다.. 숫자가 크면 아래쪽으로 위치가 바뀌겠죠..
    left:10px 는 화면의 왼쪽에서부터 나타날 위치입니다.. 숫자가 크면 오른쪽으로 위치가 바뀌겠죠..

  • 실제 그림주소 지정하는 부분
    message[0]="<img src='http://hobbang.co.kr/images/01.gif' border=0>";
    message[1]="<img src='http://hobbang.co.kr/images/02.gif' border=0>";
    message[2]="<img src='http://hobbang.co.kr/images/03.gif' border=0>";
    message[3]="<img src='http://hobbang.co.kr/images/04.gif' border=0>";
    message[4]="<img src='http://hobbang.co.kr/images/05.gif' border=0>";
    message[5]="<img src='http://hobbang.co.kr/images/06.gif' border=0>";
    message[6]="<img src='http://hobbang.co.kr/images/07.gif' border=0>";
    message[7]="<img src='http://hobbang.co.kr/images/08.gif' border=0>";
    message[8]="<img src='http://hobbang.co.kr/images/09.gif' border=0>";
    message[9]="<img src='http://hobbang.co.kr/images/10.gif' border=0>";
    message[10]="<im gsrc='http://hobbang.co.kr/images/11.gif' border=0>";
    message[11]="<im gsrc='http://hobbang.co.kr/images/12.gif' border=0>";
    message[12]="<im gsrc='http://hobbang.co.kr/images/13.gif' border=0>";
    message[13]="<im gsrc='http://hobbang.co.kr/images/14.gif' border=0>";

    : 화면에 나타날 그림들을 순서대로 지정한 것입니다.. 맨 앞줄에 보면 간단하죠?
    message[0] 부터 숫자가 하나씩 커지고 그림주소 써 있구요..
    message[0]부터 순서대로 그림이 나타납니다.. 그림의 갯수는 쉽게 고칠 수 있겠죠?
    그림의 개수만큼만 message[0]부터 순서대로 지정해주면 되니까요..

  • toplevel.innerHTML="<span style='position:absolute;font-family:"+textfont+";font-size:"+thissize+"pt;color:"+textcolor1+"; clip:rect(2px "+i_rightclip+"px 200px 0px)'>"+message[i_message]+"</span>";

    : 간혹 큰 그림을 사용했을 때에 그림이 모두 안보이고 잘려보인다면 여기의 200px 0px를 수정해 보세요.. 그러면 보이는 부분을 확대할 수 있습니다..


  • var timer=setTimeout("morewidth()",550);
    var intermezzo=setTimeout("morewidth()",550);

    : 위의 두 줄을 찾아서 숫자를 크게 하면 다음 그림으로 바뀌기까지의 속도가 느려집니다.. 첫번째 줄은 익스플로러가 아닌 웹브라우저일 때 사용되는 부분이고 두 번째 줄이 익스플로러일 때 사용되는 부분이니까 다른 브라우저 신경 안쓴다면 두 번째 줄만 수정해도 됩니다..


    • js 파일로 바꾸려다가요.. js 파일보다는 직접 소스 자체를 삽입하는게 좋을 것 같아서 그냥 올립니다..

    		2023-10-05
    07:52:47


      추천하기   목록보기

    현재글을 이메일로 보내기

    No 제 목 글쓴이 작성일 조회
    613   클릭하면 아웃룩익스프레스 메일보내기 창 뜨도록 하는 태그     10-05 02:03 1917
    612   [자바애플릿] 그림 위에 물이 흩어지는 소스     10-03 17:44 4867
      지정한 여러 그림이 자동으로 변하는 소스     10-03 17:21 5140
    610   깃털이 바람에 날리며 내려오는 소스     10-03 16:48 5753
    609   그림태그인 <IMG> 태그에서 border=0을 꼭 써줘야 할까요?     10-03 16:43 2010
    608   그림(사진) 보여주는 <IMG> 태그 초간단 설명     10-03 16:43 3032
    607   플래시 뻐꾸기 시계     10-03 04:33 4858
    606   플래시 벽시계     10-02 16:44 3723
    605   창을 일정 시간 후 자동으로 닫기(종료하기)     10-02 04:00 5018
    604   마퀴 태그를 이용한 반짝이는 별이 이리저리 나타났다 사라지는 소스     10-02 03:15 5171
    603   특이한 실시간 플래시 시계     10-01 18:12 4873
    602   엔토이의 자신의 블로그 스타등록을 어디서든 하기 태그 소스     09-30 02:11 1969
    601   엔토이의 토이토이 메신저 실행시켜 주는 소스 (어느 홈에서든 사용 가능)     09-30 02:09 1559
    600   어느 사이트에서나 엔토이의 자신의 블로그 창 띄워주는 소스     09-30 01:59 1651
    599   엔토이 블로그에서 웹폰트 적용하기     09-30 01:53 3179
       [이전 10개] [1].. 11 [12][13][14][15][16][17][18][19][20]..[51] [다음 10개]
     
    Copyright 1999-2023 Zeroboard / skin by Praise Jesus
    Copyright ⓒ 1998~ . Hobbang.co.kr. All rights reserved.