웹마스터 팁

  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>
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
HTML필수 항목( 기본구조)- 초보자용 입니다! 김수한 2003.07.25
링크 클릭시 점선 없애는 이벤트. 일일히 지정안하고 한꺼번에 되게 하기. [14] 최용근 2003.07.24
링크부분에 밑줄을 없애는 방법.... [10] 공유 2003.07.19
노프레임 홈만들기 (1) - 표로 레이아웃 만들고 그림 삽입하기 [45] file @kihwa 2003.07.11
내 카페/홈페이지에 뉴스 달기 소스 공개 [9] 깜보 2003.07.10
쭘's식 홈페이지 만들기 No.5 - (미리보기 포함) [18] file 쭘's 2003.07.07
히야[HIYA] - 노프레임 왕초보가되어 프로젝트 !! [ 노프레임 홈피 만들기 !! 7번째강좌 ] [19] 공찬영 2003.07.05
도메인 주소를 고정한 페이지를 새로고침해도 처음으로 돌아가는것을 방지 ★ [24] 새벽이슬 2003.07.05
반짝이게 해보자 [5] 팩맨24 2003.07.03
[HTML에 필터 적용] 알파 필터 filter: Alpha(Opacity= 적용에 주의할 참고사항들 [2] 김병희 2003.06.28
노프레임 게시판을 만들때 이미지 경로지정 [11] webzang 2003.06.26
새창에서 세로스크롤만 되도록 하기 [10] 윙크벨 2003.06.26
쭘's식 홈페이지 만들기 No.4 - (미리보기 포함) [26] file 쭘's 2003.06.16
[매크로] mac_0004 메뉴를 담은 표의 위치와 모양 바꿔치기 매크로 [1] 김병희 2003.06.16
자신이 만든 문서가 HTML(XHTML) 표준에 따르고 있는지 검사해 보는 방법. [6] 귀여운Rootin 2003.06.14
[매크로] 노프레임 페이지 작성시 나모에서 링크 타겟 매크로로 입력하기 [4] 김병희 2003.06.14
펼침메뉴소스 [12] 이성헌 2003.06.08
스크롤바 내맘대루 색바꾸기 [예제추가] [5] ˚ⓢⓘⓔ。 2003.06.07
쭘's식 홈페이지 만들기 No.3 - 깔끔 노프레임 (미리보기 포함) [37] file 쭘's 2003.06.07
[re] 쭘's식 홈페이지 만들기 No.3 - 깔끔 노프레임 (미리보기 포함) [5] 파마아줌마 2003.07.21
태그 쓰기