Preview Source I Knew I Loved You - Savage Garden maybe its intuition but some things you just don't question like in your eyes, I saw my future in an instant and there it goes, I think I found my best friend I know that may sound more than a little crazy but I believe... I knew I loved you before I met you I think I dreamed you into life I knew I loved you before I met you I have been waiting all my life there's just no reason only the sense of completion and in your eyes I see the missing pieces I'm searching for I think I have found my way home I know that may sound more than a little crazy but I believe... I knew I loved you before I met you I think I dreamed you into life I knew I loved you before I met you I have been waiting all my life a thousand angels dance around you I am complete now that I have found you I knew I loved you before I met you I think I dreamed you into life I knew I loved you before I met you I have been waiting all my life I knew I loved you before I met you I think I dreamed you into life I knew I loved you before I met you I have been waiting all my life <STYLE> BODY { scrollbar-3dlight-color:; scrollbar-arrow-color:; scrollbar-track-color:; scrollbar-darkshadow-color:; scrollbar-face-color:; scrollbar-highlight-color:; scrollbar-shadow-color:} </STYLE> Color selection scrollbar-3dlight-color scrollbar-arrow-color scrollbar-track-color scrollbar-darkshadow-color scrollbar-face-color scrollbar-highlight-color scrollbar-shadow-color How to use 원하는 색상을 선택하거나 CSS소스를 넣으세요 체크박스를 클릭하여 차례대로 선택하세요 색상을 지정할때마다 스크롤바의 색상이 직접 보여지면서 소스가 완성됩니다 완성한후 Source를 복사하여 html문서의 <head>부분에 넣어주시면 됩니다 Internet explorer 5.5 이상에서만 작동합니다

<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>
<P>

<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>
<div align="center">
<textarea cols=38 rows=5 wrap=off id="oTextArea" name="textarea">
I Knew I Loved You - Savage Garden

maybe its intuition
but some things you just don't question
like in your eyes, I saw my future in an instant
and there it goes, I think I found my best friend
I know that may sound more than a little crazy
but I believe...

I knew I loved you before I met you
I think I dreamed you into life
I knew I loved you before I met you
I have been waiting all my life

there's just no reason only
the sense of completion
and in your eyes I see
the missing pieces I'm searching for
I think I have found my way home
I know that may sound more than a little crazy but I believe...

I knew I loved you before I met you
I think I dreamed you into life
I knew I loved you before I met you
I have been waiting all my life

a thousand angels dance around you
I am complete now that I have found you

I knew I loved you before I met you
I think I dreamed you into life
I knew I loved you before I met you
I have been waiting all my life
I knew I loved you before I met you
I think I dreamed you into life
I knew I loved you before I met you
I have been waiting all my life




</textarea>
</div>
</td>
</tr>
</table>
</td>
<td bgcolor="#F4FDFF" width="51%"><span id="code" style="overflow-y:auto;">
&lt;STYLE&gt;<br>
BODY { <span id="s3d1">scrollbar-3dlight-color:</span><span id="s3d2"></span>;<br>
<span id="sArrow1">scrollbar-arrow-color:</span><span id="sArrow2"></span>;<br>
<span id="sBase1">scrollbar-track-color:</span><span id="sBase2"></span>;<br>
<span id="sDark1">scrollbar-darkshadow-color:</span><span id="sDark2"></span>;<br>
<span id="sFace1">scrollbar-face-color:</span><span id="sFace2"></span>;<br>
<span id="sHighlight1">scrollbar-highlight-color:</span><span id="sHighlight2"></span>;<br>
<span id="sShadow1">scrollbar-shadow-color:</span><span id="sShadow2"></span>}<br>
&lt;/STYLE&gt;</span></td>
</tr>
</table>
<table bgcolor="#FFFFFF" width="100%" cellspacing="0" cellpadding="2" border="0">
<tr>
<td bgcolor="#D0F5FF">
<div align="center">Color selection</div>
</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%"> <font size="2">
<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('<A HREF="javascript:display(\'' + (red + green + blue) + '\')" >')
document.write('<IMG SRC="#" BORDER=0 HEIGHT=13 WIDTH=13>')
document.write('</A>')
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>
</font></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소스를 넣으세요<br>
체크박스를 클릭하여 차례대로 선택하세요<br>
색상을 지정할때마다 스크롤바의 색상이 직접 보여지면서 소스가 완성됩니다<br>
완성한후 Source를 복사하여 html문서의 &lt;head&gt;부분에 넣어주시면 됩니다


<b><br>
<font color="#0000FF">Internet explorer 5.5 이상에서만 작동합니다</font></b>
<br>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>