인터넷정보

스크롤바 꾸미기 툴 - 제너레이터

알 수 없는 사용자 2007. 10. 17. 17:55


http://oxtag.com/html/ex/scbg_tool/scrollbar_color_tool.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>iweb - Scrollbar Color Tool</title>
<style type="text/css">

body {
 border:  0;
 background: ButtonFace;
 margin:  0;
 overflow: auto;
}

#demoContainer {
 overflow: scroll;
 width:  205px;
 height:  105px;
 border:  2px inset;
 background: Window;
 color:  WindowText;
 font:  Icon;
 padding: 5px;
 font-size: 15px !important;
}

#filler {
 position: relative;
 width:  500px;
 height:  500px;
}

#colorPicker {
 width:  205px;
 height:  105px;
}

#restoreButton {
 width:  205px;
}

select {
 width:   205px;
 margin-bottom: 5px;
}

pre {
 background: Window;
 color:  WindowText;
 border:  2px inset;
 font-size: 12px;
 width:  320;
 height:  260px;
 overflow: auto;
}

pre a {
 color: blue;
}

</style>
<script type="text/javascript">

/*
var cssProperties = {
 "scrollbar-3dlight-color" : "",
 "scrollbar-arrow-color"  : "",
 "scrollbar-base-color"  : "",
 "scrollbar-darkshadow-color": "",
 "scrollbar-face-color"  : "",
 "scrollbar-highlight-color" : "",
 "scrollbar-shadow-color" : ""
};
*/

var codeTimer;
var bDontUpdateDemo = true;

var cssProperties = {
 "scrollbar3dLightColor"  : "scrollbar-3dlight-color",
 "scrollbarArrowColor"  : "scrollbar-arrow-color",
 "scrollbarBaseColor"  : "scrollbar-base-color",
 "scrollbarDarkShadowColor" : "scrollbar-darkshadow-color",
 "scrollbarFaceColor"  : "scrollbar-face-color",
 "scrollbarHighlightColor" : "scrollbar-highlight-color",
 "scrollbarShadowColor"  : "scrollbar-shadow-color",
 "scrollbarTrackColor"  : "scrollbar-track-color"
};

var currentProperty = cssProperties[0];

function handleCPChange() {}

function handleSelectChange() {
 var demoContainer = document.getElementById("demoContainer");
 var propertySelect = document.getElementById("propertySelect");
 var colorPicker = document.getElementById("colorPicker");
 
 var sProperty = propertySelect.options[propertySelect.selectedIndex].value;
 var currentValue = demoContainer.currentStyle[sProperty];
 //alert(currentValue);
 if (currentValue != "") {
  var rgb = colorToRgb(currentValue);
  function inspect(obj) {
   var str = "";
   for (var k in obj)
    str += "obj." + k + " = " + obj[k] + "\n";
   window.alert(str);
  }
  //inspect(rgb)
  bDontUpdateDemo = true;
  colorPicker.setColor(rgb.r / 255, rgb.g / 255, rgb.b / 255);
  bDontUpdateDemo = false;
 }
}

function colorToRgb(sColor) {
 if (typeof sColor != "string")
  sColor = String(sColor);
 
 if (sColor.charAt(0) == "#") {
  return {
   r : Number("0x" + sColor.substring(1,3)),
   g : Number("0x" + sColor.substring(3,5)),
   b : Number("0x" + sColor.substring(5,7))
  };
 }
 else if (/rgb\(/i.test(sColor)) {
  var parts = sColor.split(",");
  var re = /[^0123456789]/g;
  return {
   r : Number(parts[0].replace(re, "")),
   g : Number(parts[1].replace(re, "")),
   b : Number(parts[2].replace(re, ""))
  };
 }
 else {
  return {r : 0, g : 0, b : 0};
 }
}

function updateDemoContainer(sColor) {
 if (!bDontUpdateDemo) {
  var demoContainer = document.getElementById("demoContainer");
  var propertySelect = document.getElementById("propertySelect");
 
  var sProperty = propertySelect.options[propertySelect.selectedIndex].value;
  demoContainer.style[sProperty] = sColor;
  propertySelect.style[sProperty] = sColor;
 }
}

function makeSpacing(s) {
 var max = 26;
 var spaces = max - s.length;
 var res = new Array(spaces);
 for (var i = 0; i < spaces; i++)
  res[i] = "&nbsp;";
 return res.join("");
}

function generateCode() {
 var demoContainer = document.getElementById("demoContainer");
 var propertySelect = document.getElementById("propertySelect");
 var codeArea = document.getElementById("codeArea");
 
 var sProperty, sValue;
 var str = "body {<br>";
 for (var i = 0; i < propertySelect.options.length; i++) {
  sProperty = propertySelect.options[i].value;
  sValue = demoContainer.style[sProperty];
  if (sValue != "") {
   str += "&nbsp;&nbsp;&nbsp;<a href='#' onclick='document.getElementById(\"propertySelect\").selectedIndex = " + i + "; handleSelectChange(); return false;'>" + cssProperties[sProperty] + "</a>:&nbsp;" + makeSpacing(cssProperties[sProperty]) + sValue + ";<br>"
  }
 }
 str += "}";
 
// return str;
 
 codeArea.innerHTML = str;
}

window.onload = function () {
 propertySelect.onchange = handleSelectChange;
 propertySelect.options[4].selected = true;
 bDontUpdateDemo = false;
 handleSelectChange();
 
 var codeArea = document.getElementById("codeArea");
 var td = document.getElementsByTagName("TD")[0];
 codeArea.style.height = td.scrollHeight;
};

</script>
<script language="JScript" for="colorPicker" event="onscriptletevent(name, eventData)">
<!--

if (name == "oncolorchange") {
 var sColor =
  "rgb(" + Math.round(255*eventData.r) +
  "," + Math.round(255*eventData.g) +
  "," + Math.round(255*eventData.b) + ")";
 updateDemoContainer(sColor);
 window.clearTimeout(codeTimer);
 codeTimer = window.setTimeout(generateCode, 100);
}

//-->
</script>
</head>
<body>

<table style="width: 100%; height: 100%" cellspacing="5" cellpadding="0">
<tr>
<td style="width: 1px;" valign="top">

<select id="propertySelect">
<script>
for (var sProp in cssProperties)
 document.write("<option value='" + sProp + "'>" + cssProperties[sProp] + "</option>");
</script>
</select>

<div id="demoContainer">
 <div id="filler"><br><br>iweb<br>Scroll Color Editer
 
 
 </div>
</div>

<object id="colorPicker" type="text/x-scriptlet" data="colorpicker1.html"></object>

<button id="restoreButton" onclick="updateDemoContainer(''); generateCode()">적용 색상 초기화</button><br>


</td>

<td valign="top">

<pre id="codeArea"></pre>
<!--
scrollbar-shadow  [바의 오른쪽과 밑쪽 그림자색]
scrollbar-highlight [바의 왼쪽과 위쪽의 얇은 선색]
scrollbar-3dlight   [바의 왼쪽위쪽에 진하게 들어가는 선]    
scrollbar-darkshadow [바의 오른쪽과 밑쪽에 들어가는 얇은 색]
scrollbar-track [바가 없는 아래부분의 색]
scrollbar-arrow [위 아래 화살표 색]
 -->
</td>
</tr>
</table>

</body>
</html>

반응형

'인터넷정보' 카테고리의 다른 글

keystroke - 지정한 텍스트 타이핑시 연결된 URL로 이동  (0) 2007.10.17
fade in/out  (0) 2007.10.17
fade in/out  (0) 2007.10.17
페이지 로딩될때 준비한 메시지 로딩시까지 보여주기 - 로딩바  (0) 2007.10.17
페이지 로딩될때 준비한 메시지 로딩시까지 보여주기 - 로딩바  (0) 2007.10.17
스크롤바 꾸미기 툴 - 제너레이터  (0) 2007.10.17
평범한 사이트맵은 싫다!!! (플래시 같은 사이트맵 꾸미기)  (0) 2007.10.17
평범한 사이트맵은 싫다!!! (플래시 같은 사이트맵 꾸미기)  (0) 2007.10.17
스크롤바를 이미지로 바꿔보세요.(공지용)  (0) 2007.10.17
스크롤바를 이미지로 바꿔보세요.(공지용)  (0) 2007.10.17

'인터넷정보'의 다른글

  • 현재글스크롤바 꾸미기 툴 - 제너레이터

관련글

댓글

티스토리툴바