웹마스터 팁

  2. Support
  3. 웹마스터 팁

스크롤바 내맘대루 색바꾸기 [예제추가]

2003.06.07 22:20

˚ⓢⓘⓔ。

스크롤바 내맘대루 색바꾸기예제

<html>
<HEAD>
<title>Scrollbar[tag]</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<SCRIPT LANGUAGE="VBSCRIPT">
<!--
        function fnReset()
                        // Unbold all spans
                s3d1.style.fontWeight = "normal"
                s3d2.style.fontWeight = "normal"        
                sArrow1.style.fontWeight = "normal"
                sArrow2.style.fontWeight = "normal"
                sBase1.style.fontWeight = "normal"
                sBase2.style.fontWeight = "normal"
                sDark1.style.fontWeight = "normal"
                sDark2.style.fontWeight = "normal"
                sFace1.style.fontWeight = "normal"
                sFace2.style.fontWeight = "normal"
                sHighlight1.style.fontWeight = "normal"
                sHighlight2.style.fontWeight = "normal"
                sShadow1.style.fontWeight = "normal"
                sShadow2.style.fontWeight = "normal"
        end function

        function fnChange(sInProp)        
                fnReset()
                Select Case sInProp                        
                        Case "3d"                                          
                                oTextArea.style.scrollbar3dLightColor = o3d.value
                                s3d2.innerText = o3d.value        
                                s3d2.style.fontWeight = "bold"
                                s3d1.style.fontWeight = "bold"
                                o3dc.style.background = o3d.value        
                        Case "arrow"
                                oTextArea.style.scrollbarArrowColor = oArrow.value
                                sArrow2.innerText = oArrow.value
                                sArrow2.style.fontWeight = "bold"
                                sArrow1.style.fontWeight = "bold"
                                oArrowc.style.background = oArrow.value
                        Case "base"
                                oTextArea.style.scrollbartrackColor = oBase.value
                                sBase2.innerText = oBase.value
                                sBase2.style.fontWeight = "bold"
                                sBase1.style.fontWeight = "bold"                
                                oBasec.style.background = oBase.value
                        Case "dark"
                                oTextArea.style.scrollbarDarkShadowColor = oDark.value
                                sDark2.innerText = oDark.value
                                sDark2.style.fontWeight = "bold"
                                sDark1.style.fontWeight = "bold"        
                                oDarkc.style.background = oDark.value
                        Case "face"
                                oTextArea.style.scrollbarFaceColor = oFace.value
                                sFace2.innerText = oFace.value
                                sFace2.style.fontWeight = "bold"
                                sFace1.style.fontWeight = "bold"                
                                oFacec.style.background = oFace.value
                        Case "highlight"
                                oTextArea.style.scrollbarHighlightColor = oHighlight.value        
                                sHighlight2.innerText = oHighlight.value
                                sHighlight2.style.fontWeight = "bold"
                                sHighlight1.style.fontWeight = "bold"                
                                oHighlightc.style.background = oHighlight.value        
                        Case "shadow"
                                oTextArea.style.scrollbarShadowColor = oShadow.value                                
                                sShadow2.innerText = oShadow.value
                                sShadow2.style.fontWeight = "bold"
                                sShadow1.style.fontWeight = "bold"        
                                oShadowc.style.background = oShadow.value        
                End Select        
        end function
-->
</SCRIPT>

<style type="text/css">
<!--
td {  font-size: 9pt; color: #008ED2}
input,textarea {  font-size: 9pt}
-->
</style>
</HEAD>

<body>


  
<table border="0" cellspacing="1" cellpadding="2" width="602" align="center">
  <tr>
    <td valign="TOP" width="601">
      <table width="595" align="center" border="0" cellspacing="1" cellpadding="2" bgcolor="#00BCF2">
        <tr>
          <td align=CENTER valign="CENTER" height="200" width="594" bgcolor="#F4FDFF">
            <table bgcolor="#FFFFFF" width="100%" cellspacing="0" cellpadding="2" border="0">
              <tr>
                <td bgcolor="#D0F5FF" align="center" width="49%">Preview</td>
                <td bgcolor="#D0F5FF" align="center" width="51%">Source</td>
              </tr>
              <tr>
                <td bgcolor="#F4FDFF" width="49%">
                  <table border="0" cellspacing="0" cellpadding="4" align="center" bgcolor="#FFFFFF">
                    <tr>
                      <td>
                        


                          <textarea cols=38 rows=5 wrap=off id="oTextArea"  name="textarea">내용..</textarea>
                        

                      </td>
                    </tr>
                  </table>
                </td>
                <td bgcolor="#F4FDFF" width="51%"><span id="code" style="overflow-y:auto;">
                  <STYLE>

                  BODY { <span id="s3d1">scrollbar-3dlight-color:</span><span id="s3d2"></span>;

                  <span id="sArrow1">scrollbar-arrow-color:</span><span id="sArrow2"></span>;

                  <span id="sBase1">scrollbar-track-color:</span><span id="sBase2"></span>;

                  <span id="sDark1">scrollbar-darkshadow-color:</span><span id="sDark2"></span>;

                  <span id="sFace1">scrollbar-face-color:</span><span id="sFace2"></span>;

                  <span id="sHighlight1">scrollbar-highlight-color:</span><span id="sHighlight2"></span>;

                  <span id="sShadow1">scrollbar-shadow-color:</span><span id="sShadow2"></span>}

                  </STYLE></span></td>
              </tr>
            </table>
            <table bgcolor="#FFFFFF" width="100%" cellspacing="0" cellpadding="2" border="0">
              <tr>
                <td bgcolor="#D0F5FF">
                  
Color selection

                </td>
              </tr>
              <tr>
                <td bgcolor="#F4FDFF">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="53%" valign="top">
                        <table cellpadding="2" width="310" cellspacing="0">
                          <tr>
                            <td align="RIGHT" width="182">scrollbar-3dlight-color
                            </td>
                            <td style="padding-left:5" width="126">
                              <input type="text" name="textfield"  id="o3d" onChange="fnChange('3d')" size="10">
                                                            <input type="text" name="textcol"  id="o3dc" size="1">
                                                          <input type="radio" name="colors" value="r_3d" checked>
                            </td>
                          </tr>
                          <tr>
                            <td align="RIGHT" width="182">scrollbar-arrow-color
                            </td>
                            <td style="padding-left:5" width="126">
                              <input type="text" name="textfield" id="oArrow" onChange="fnChange('arrow')" size="10">
                              <input type="text" name="textcol"  id="oArrowc" size="1">
                              <input type="radio" name="colors" value="r_arrow">                                                          
                            </td>
                          </tr>
                          <tr>
                            <td align="RIGHT" width="182">scrollbar-track-color
                            </td>
                            <td style="padding-left:5" width="126">
                              <input type="text" name="textfield" id="oBase" onChange="fnChange('base')" size="10">
                              <input type="text" name="textcol"  id="oBasec" size="1">
                              <input type="radio" name="colors" value="r_base">
                            </td>
                          </tr>
                          <tr>
                            <td align="RIGHT" width="182">scrollbar-darkshadow-color
                            </td>
                            <td style="padding-left:5" width="126">
                              <input type="text" name="textfield" id="oDark" onChange="fnChange('dark')" size="10">
                              <input type="text" name="textcol"  id="oDarkc" size="1">
                              <input type="radio" name="colors" value="r_dark">
                            </td>
                          </tr>
                          <tr>
                            <td align="RIGHT" width="182">scrollbar-face-color
                            </td>
                            <td style="padding-left:5" width="126">
                              <input type="text" name="textfield" id="oFace" onChange="fnChange('face')" size="10">
                              <input type="text" name="textcol"  id="oFacec" size="1">
                              <input type="radio" name="colors" value="r_face">
                            </td>
                          </tr>
                          <tr>
                            <td align="RIGHT" width="182">scrollbar-highlight-color
                            </td>
                            <td style="padding-left:5" width="126">
                              <input type="text" name="textfield" id="oHighlight" onChange="fnChange('highlight')" size="10">
                              <input type="text" name="textcol"  id="oHighlightc" size="1">
                              <input type="radio" name="colors" value="r_highlight">
                            </td>
                          </tr>
                          <tr>
                            <td align="RIGHT" width="182">scrollbar-shadow-color
                            </td>
                            <td style="padding-left:5" width="126">
                              <input type="text" name="textfield" id="oShadow" onChange="fnChange('shadow')" size="10">
                              <input type="text" name="textcol"  id="oShadowc" size="1">
                              <input type="radio" name="colors" value="r_shadow">
                            </td>
                          </tr>
                        </table>
                      </td>
                      <td width="47%" valign="top" align="center">
                        <table border="0" cellpadding="0" cellspacing="0">
                          <tr>
                            <td colspan="2">
                              <table border="0" width="100%">
                                <tr>
                                  <td align="center" width="100%">
<script language="JavaScript">
<!--
var hex = new Array(6)
hex[0] = "FF"
hex[1] = "CC"
hex[2] = "99"
hex[3] = "66"
hex[4] = "33"
hex[5] = "00"

function display(triplet) {
        // colorcode.value = "#" + triplet;
        if(colors[0].checked == true)
        {
                o3d.value = "#" + triplet;
                fnChange('3d');
                o3dc.style.background = "#" + triplet;
        } else if(colors[1].checked == true)
        {
                oArrow.value = "#" + triplet;
                fnChange('arrow');
                oArrowc.style.background = "#" + triplet;
        } else if(colors[2].checked == true)
        {
                oBase.value = "#" + triplet;
                fnChange('base');
                oBasec.style.background = "#" + triplet;
        } else if(colors[3].checked == true)
        {
                oDark.value = "#" + triplet;
                fnChange('dark');
                oDarkc.style.background = "#" + triplet;
        } else if(colors[4].checked == true)
        {
                oFace.value = "#" + triplet;
                fnChange('face');
                oFacec.style.background = "#" + triplet;
        } else if(colors[5].checked == true)
        {
                oHighlight.value = "#" + triplet;
                fnChange('highlight');
                oHighlightc.style.background = "#" + triplet;
        } else if(colors[6].checked == true)
        {
                oShadow.value = "#" + triplet;
                fnChange('shadow'+ ');
                oShadowc.style.background = "#" + triplet;
        }
}

function drawCell(red, green, blue) {
        document.write('<TD BGCOLOR="#' + red + green + blue + '">')
        document.write('')
        document.write('')
        document.write('')
        document.write('</TD>')
}

function drawRow(red, blue) {
        document.write('<TR>')
        for (var i = 0; i < 6; i++) {
                drawCell(red, hex[i], blue)
        }
        document.write('</TR>')
}

function drawTable(blue) {
        document.write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>')
        for (var i = 0; i < 6; ++i) {
                drawRow(hex[i], blue)
        }
        document.write('</TABLE>')      
}

function drawCube() {
        document.write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=1><TR>')
        for (var i = 0; i < 6; ++i) {
           if (i == 3) {
             document.write('</Tr><Tr>')}
                document.write('<TD BGCOLOR="#FFFFFF">')
                drawTable(hex[i])
                document.write('</TD>')
        }
        document.write('</TR></TABLE>')
}

drawCube()
// -->
</script>
                                    </td>
                                </tr>
                              </table>
                            </td>
                          </tr>

                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
            <table width="100%" border="0" cellspacing="0" cellpadding="2">
              <tr>
                <td bgcolor="#D0F5FF" align="center">How to use</td>
              </tr>
              <tr>
                <td bgcolor="#F4FDFF">원하는 색상을 선택하거나 CSS소스를 넣으세요

                  체크박스를 클릭하여 차례대로 선택하세요

                  색상을 지정할때마다 스크롤바의 색상이 직접 보여지면서 소스가 완성됩니다

                  완성한후 Source를 복사하여 html문서의 <head>부분에 넣어주시면 됩니다

                  
                  

                  Internet explorer 5.5 이상에서만 작동합니다
                  

                  </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

</html>
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
자동 스크롤 메뉴 (끄기 기능, 무한 스크롤 X) [6] ☺심심 2004.05.02
아이프레임 가로스크롤바 없애기 [3] 백승창 2004.05.28
어쩌다 나온 깔끔한 그레이 스크롤바.. 흠흠.. [11] ☺심심 2004.06.06
페이지 회색스크롤바로 바꾸기 편입성공기 2004.12.06
무지 짧은 소스로 스크롤바를 왼쪽으로 옮겨보자 [4] 한용 2005.11.10
아이프레임 스크롤바를 투명하게 wwolf 2008.09.21
css 정리 파일(한글) [3] file 미곰탱 2009.01.22
[JavaScript] 전체화면으로 페이지 열기 [2] SM 2002.02.24
[JavaScript] 채널모드로 윈도우 열기 SM 2002.02.24
[JavaScript] 일반적인 형태의 전체크기 윈도우 열기 SM 2002.02.24
스크롤바색상바꿔주는프로그램(수정) [3] 이슈™ 2002.03.13
자동 팝업창띠우기 소스 [4] 이슈™ 2002.03.13
부드럽게 스크롤바를 따라다니는..+_+ [6] 키르(絶對) 2002.06.13
개판 오분전 넷 오디오 최종 수정판 [6] file 미친개 2002.07.28
원하는 위치에서 스크롤바를 부드럽게 따라다님 [10] ▩윤미 2002.08.20
엔지오같은 메뉴 만들기 #2 - Error 수정판 -_-;; [13] Eccen 2002.11.12
iframe 내용에 맞게 자동으로 크기 조절하기 [36] 행복한고니 2002.11.21
요청해오신 레이어 무조건 중앙에 열리기 와 클릭하는 곳에 열리기 두가지 소스입니다. [4] 모라미 2003.02.25
메뉴이동입니다. [5] 데빌스텔스 2003.04.20
HTML경고창 [수정#2] [14] [락위듀]아렌티 2003.07.26
태그 쓰기