웹마스터 팁

  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>
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
<TD>에 스크롤바 생성하기!! [12] millth 2003.08.04
새창에서 세로스크롤만 되도록 하기 [10] 윙크벨 2003.06.26
스크롤바 내맘대루 색바꾸기 [예제추가] [5] ˚ⓢⓘⓔ。 2003.06.07
CSS파일이용하여 링크에 건반효과주기(강력추천) [8] 호호짱 2003.05.23
새창뜨는 링크 누를때 스크롤바 고정시키기 [8] REAL 2003.04.09
스크롤바 색 바꾸기 [1] 권순빈 2003.02.03
스크롤바 뒤집을때 문서 전체가 뒤집히는것 방지할때 [4] K.샘 2003.02.01
스크롤바 자동/예/아니오 [11] 레드 2003.01.18
[레드의 태그중급]폼 태그..(이상해져서 삭제하구 다시 적습니다) [3] 레드 2003.01.15
[레드의 태그초보]아이프레임을 새롭게 구조하였습니다..(;;) [3] 레드 2003.01.14
[1분짜리 팁!] 스크롤바 왼쪽으로 위치하게 하기! [6] 찐군 2003.01.09
HTML만으로 BGM Player 만들기... [7] 고광욱 2003.01.02
필드셋 응용;;; teslaMINT 2002.12.21
스크롤바를 이용하지 않고 페이지내에서 원하는 위치로 이동하기 [10] 유지호 2002.09.28
레이어에 스크롤바 달기(예제보기 제거) [13] TheMics 2002.08.09
Scrollbar Generator [스크롤바 색상을 쉽게 바꿀수 있게 코드생성] [6] 문사라 2002.07.11
TEXTAREA 스크롤바 뒤집기 [4] ZipShin 2002.06.20
스크롤바 색상 변경 ...! [6] 오빠야™ 2002.06.17
홈페이지의 대문에서 스크롤바 없애기 [10] keymove 2002.06.15
iframe태그.. HTML문서안에 또하나의 HTML문서.. [9] 신종은 2002.05.09
태그 쓰기