인터넷정보

[스크립트] 스크립트만으로 움직이는 막대 Chart 그래프

알 수 없는 사용자 2007. 12. 19. 10:01
RB rbchart 플래시가 아닙니다. 스크립트로 작동..
 
5 단계
7 단계
4 단계
1 단계
6 단계
 
- 명칭 : rbchart Ver1.0

[ 라이센스 ]

1) 비상업적인 사이트에 대해서는 막대 클릭시 지금의 사이트에 링크로 접속이 가능해야 하며,
     onclick="func_rbchart_link();" style="cursor:hand;" 으로 func_rbchart_link(); 함수을
     타고 지금의 사이트( chart.php ) 로
     이동이 가능하게 링크가 걸려 있어야 합니다.

2) 상업적인 용도로 매매 및 판매로 이용 하실수 없습니다.

3) 상업적인 사이트에 사용하실수 없으며,
    상업적인 사이트에 이용하실시 위의 샘플의
     CopyRight rbchart Ver1.0 이미지 ( ) 가 링크로
     지금의 사이트( chart.php ) 가 되어
    챠트 아래에 표현되어야 합니다.

- 개발자 : 루지기 ( rujigi ), 벤지 ( bengi )

- 시간이 날때마다 계속 다른 Chart 및 기능을 만들어 올리도록 하겠습니다.

- 사용언어 : SCRIPT + HTML + CSS

- 샘플페이지 : chart.php

- 문의 게시판


<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=euc-kr'>
<style>
p, body, td, select, div, form, input, textarea, center, option, table, pre, blockquote {font-size:9pt; font-family:Verdana, 굴림, Gulim; letter-spacing:0px; COLOR: #333333; }
</style>
<title>RB rbchart</title>
</head>
<body>

  <table width="625" height="297" border="0" cellspacing="0" cellpadding="0" background="http://www.rujigi.com/dev/image/G_bg.gif">
  <tr>
    <td width="110"> </td>
    <td align="center" valign="bottom" style="padding-bottom:35px">
              <table width="81" border="0" cellspacing="0" cellpadding="0">
              <tr><td align="center" style="padding-right:8px;">5 단계</td></tr>            
              <tr>
                <td><img src="http://www.rujigi.com/dev/image/01_top.png" width="81" height="15" /></td>
              </tr>
              <tr>
                <td background="http://www.rujigi.com/dev/image/01_mid_bg.png"><img src="http://www.rujigi.com/dev/image/01_mid.png" id=rbchart0 width="81" height="15" onclick="func_rbchart_link();" style="cursor:hand;"></td>
              </tr>
              <tr>
                <td><img src="http://www.rujigi.com/dev/image/01_down.png" width="81" height="17" /></td>
              </tr>
              </table>
    </td>
    <td align="center" valign="bottom" style="padding-bottom:35px">
          	  <table width="81" border="0" cellspacing="0" cellpadding="0">
              <tr><td align="center" style="padding-right:8px;">7 단계</td></tr>            
              <tr>
                <td><img src="http://www.rujigi.com/dev/image/02_top.png" width="81" height="15" /></td>
              </tr>
              <tr>
                <td background="http://www.rujigi.com/dev/image/02_mid_bg.png"><img src="http://www.rujigi.com/dev/image/02_mid.png" id=rbchart1 width="81" height="15" onclick="func_rbchart_link();" style="cursor:hand;"></td>
              </tr>
              <tr>
                <td><img src="http://www.rujigi.com/dev/image/02_down.png" width="81" height="17" /></td>
              </tr>
              </table>
    </td>
    <td align="center" valign="bottom" style="padding-bottom:35px">
        	<table width="81" border="0" cellspacing="0" cellpadding="0">
              <tr><td align="center" style="padding-right:8px;">4 단계</td></tr>            
              <tr>
                <td><img src="http://www.rujigi.com/dev/image/03_top.png" width="81" height="15" /></td>
              </tr>
              <tr>
                <td background="http://www.rujigi.com/dev/image/03_mid_bg.png"><img src="http://www.rujigi.com/dev/image/03_mid.png" id=rbchart2 width="81" height="15" onclick="func_rbchart_link();" style="cursor:hand;"></td>
              </tr>
              <tr>
                <td><img src="http://www.rujigi.com/dev/image/03_down.png" width="81" height="17" /></td>
              </tr>
            </table>
    </td>
    <td align="center" valign="bottom" style="padding-bottom:35px">
        	  <table width="81" border="0" cellspacing="0" cellpadding="0">
              <tr><td align="center" style="padding-right:8px;">1 단계</td></tr>            
              <tr>
                <td><img src="http://www.rujigi.com/dev/image/04_top.png" width="81" height="15" /></td>
              </tr>
              <tr>
                <td background="http://www.rujigi.com/dev/image/04_mid_bg.png"><img src="http://www.rujigi.com/dev/image/04_mid.png" id=rbchart3 width="81" height="15" onclick="func_rbchart_link();" style="cursor:hand;"></td>
              </tr>
              <tr>
                <td><img src="http://www.rujigi.com/dev/image/04_down.png" width="81" height="17" /></td>
              </tr>
            </table>
    </td>
    <td align="center" valign="bottom" style="padding-bottom:35px">
              <table width="81" border="0" cellspacing="0" cellpadding="0">
              <tr><td align="center" style="padding-right:8px;">6 단계</td></tr>            
              <tr>
                <td><img src="http://www.rujigi.com/dev/image/05_top.png" width="81" height="15" /></td>
              </tr>
              <tr>
                <td background="http://www.rujigi.com/dev/image/05_mid_bg.png"><img src="http://www.rujigi.com/dev/image/05_mid.png" id=rbchart4 width="81" height="15" onclick="func_rbchart_link();" style="cursor:hand;"></td>
              </tr>
              <tr>
                <td><img src="http://www.rujigi.com/dev/image/05_down.png" width="81" height="17" /></td>
              </tr>
              </table>
    </td>
    <td width="40"> </td>
  </tr>
  <tr><td colspan="7" align="right" height="20" valign="bottom" style="padding-right:20px;"><a href="http://www.rujigi.com/dev/chart.php"><img src="http://www.rujigi.com/dev/rbchart.gif" alt="" border="0"></a></td></tr>
  </table>
 

<table width="550">
<tr>
    <td>
       - 명칭 : rbchart Ver1.0
       <br><br> 
       [ 라이센스 ]
       <br><br>
       1) 비상업적인 사이트에 대해서는 막대 클릭시 지금의 사이트에 링크로 접속이 가능해야 하며, 
       <br>
             onclick="func_rbchart_link();" style="cursor:hand;" 으로 func_rbchart_link(); 함수을
       <br>
             타고 지금의 사이트( <a href="http://www.rujigi.com/dev/chart.php">chart.php</a> ) 로
       <br> 
             이동이 가능하게 링크가 걸려 있어야 합니다.
       <br><br>
       2) 상업적인 용도로 매매 및 판매로 이용 하실수 없습니다.
       <br><br>
       3) 상업적인 사이트에 사용하실수 없으며, 
       <br>
           상업적인 사이트에 이용하실시 위의 샘플의 
       <br>
           
       CopyRight rbchart Ver1.0 이미지 ( <img src="http://www.rujigi.com/dev/rbchart.gif" alt="" border="0"> ) 가 링크로 
       <br>
           
       지금의 사이트( <a href="http://www.rujigi.com/dev/chart.php">chart.php</a> ) 가 되어
       <br>       
           챠트 아래에 표현되어야 합니다.

       <br><br>
       - 개발자 : 루지기 ( rujigi ), 벤지 ( bengi )
       <br><br>
       - 시간이 날때마다 계속 다른 Chart 및 기능을 만들어 올리도록 하겠습니다.
       <br><br>
       - 사용언어 : SCRIPT + HTML + CSS
       <br><br>
       - 샘플페이지 : chart.php
       <br><br>       
       - <a href="http://www.rujigi.com/dev/http://www.rujigi.com/bbs/board.php?bo_table=rbchart">문의 게시판</a>
       
    </td>
</tr>
</table>

<script language=javascript>
var gstep = 3;
var gtime = 25;
var rbdata = new Array(125,175,100,25,150);
   
function rbcall(obj,ctlstep){
   sobj = eval(obj+".height");
   if( sobj < ctlstep){
      if(sobj+gstep > ctlstep) eval(obj+".height="+ctlstep);
      else eval(obj+".height="+obj+".height+gstep");
      setTimeout("rbcall('"+obj+"',"+ctlstep+")",gtime);
   }
}

for(i=0;i<rbdata.length;i++){
   obj =  eval("rbchart"+i+".height");
   if( obj < rbdata[i]) rbcall("rbchart"+i,rbdata[i]);
}

function func_rbchart_link() {
   location.href='chart.php';
}
// window.onload = 함수명;
</script>

  
</body>
</html>


반응형