Color picker (IE only) : Color Chooser : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Color Chooser »

 

Color picker (IE only)



<!--
##############################################
#         WebFX Dynamic Webboard 2.0         #
#       By Emil A Eklund (eae@eae.net)       #
#      and Erik Arvidson (erik@eae.net)      #
#           http://webfx.eae.net             #
#              April 131999                #
##############################################
# Feel free to use this script for personal  #
# and non profit web sites, as long as you   #
# are giving us credits for it, in other     #
# words, not removing nor modifying this     #
# notice in any of the files it appears in   #
##############################################
#  For commercial use contact Emil or Erik   #
##############################################
-->

<html>
<head>
<style> 
 <!--
 body  {background : buttonface; margin: 5; margin-top: 2;
     border-top: solid buttonhighlight;
    border-left: solid buttonhighlight;
    border-right: solid buttonshadow;
    border-bottom: solid buttonshadow;}
td    {width : 10px; height : 10px; font-size : 1px; cursor: hand;}
 -->
 </style>
<script type="text/javascript">
<!--

var ie5 = document.getElementById != null;

function doOver() {
  var el = window.event.srcElement;
  bgc = el.style.backgroundColor;

  if (bgc != "") {
    el.style.borderTopColor = "white";
    el.style.borderLeftColor = "white";
    el.style.borderRightColor = "black";
    el.style.borderBottomColor = "black";
  
    colorBox.style.backgroundColor = bgc;
    colorName.innerHTML = bgc;
  }
}
function doClick() {
  bgc = window.event.srcElement.style.backgroundColor;
  window.event.srcElement.style.borderColor = bgc;
  if (bgc != "") {
    window.external.raiseEvent("colorchange", bgc);
  }
}
function doOut() {
  var el = window.event.fromElement;
  bgc = el.style.backgroundColor;

  if (bgc != "") {
    el.style.borderColor = bgc;
  }
}
window.onload = init;

function init() {
  fixTitle();
}

function fixTitle() {
  document.title = parent.document.title;
}

var colors = new Array("white""snow""floralwhite""ghostwhite""whitesmoke"
"ivory""oldlace""linen""seashell""antiquewhite","papayawhip","peachpuff",
"beige","bisque","blanchedalmond","cornsilk","lemonchiffon","lightyellow",
"lightgoldenrodyellow","palegoldenrod",
"wheat","moccasin","navajowhite","khaki","burlywood","tan","darkkhaki",
"gold","yellow","goldenrod","darkgoldenrod","peru","saddlebrown","sienna","chocolate","brown",
"mintcream""aliceblue","azure","lightcyan","lightblue","powderblue",
"lightskyblue","skyblue","deepskyblue",
"cyan","aqua","aquamarine","paleturquoise","turquoise","darkturquoise","mediumturquoise",
"darkcyan","royalblue","cornflowerblue","dodgerblue","blue","mediumblue","darkblue","midnightblue","navy",
"darkslateblue","lightsteelblue","steelblue","cadetblue","slateblue","mediumslateblue",
"indigo","purple","darkmagenta","darkorchid","mediumorchid","blueviolet","mediumpurple","darkviolet","magenta",
"fuchsia","plum","thistle","violet","orchid","deeppink","hotpink",
"mediumvioletred","palevioletred",
"lavender","lavenderblush","mistyrose","pink","lightpink","salmon","lightsalmon",
"coral","darksalmon","sandybrown","orange","orangered","tomato",
"darkorange","crimson","red","firebrick","maroon","darkred","indianred","rosybrown","lightcoral",
"honeydew","springgreen","mediumspringgreen",
"palegreen","chartreuse","lawngreen","greenyellow",
"lime","lightgreen","limegreen",
"mediumaquamarine","lightseagreen","teal","mediumseagreen","seagreen","darkseagreen",
"yellowgreen","olive","olivedrab",
"forestgreen","green","darkgreen""darkolivegreen",
"lightslategray","slategray","darkslategray",
"gainsboro","lightgrey","silver","darkgray","gray","dimgray","black");

var sysColors = new Array("activeborder","activecaption","appworkspace","background","buttonface",
"buttonhighlight","buttonshadow","buttontext","captiontext","graytext","highlight","highlighttext",
"inactiveborder","inactivecaption","inactivecaptiontext","infobackground","infotext","menu","menutext",
"scrollbar","threeddarkshadow","threedface","threedhighlight","threedlightshadow","threedshadow","window",
"windowframe","windowtext");

function writeRow(ar) {
  var cells = 15;
  var str = "";
  
  for (var i=0; i<ar.length; ) {
    str += "<tr>"
    for (var j=0; j<=cells && i<ar.length; j++) {
      str += "<td style='background-color: " + ar[i"; border: 1px outset " + ar[i";'>";
      str += "&nbsp;</td>n";
      i++;
    }
    str += "</tr>n";
  }
  return str;
}  
//-->
</script>
</head>
<body>

<table cellspacing="0" 
       cellpadding="0" 
       onmouseover="doOver()" 
       onmouseout="doOut()" 
       onclick="doClick()" 
       style="width: 180;">
  <tr>
    <td colspan="15" 
        style="font-family: verdana, helvetica; font-size: 9px; color: button-text; cursor: default; height: 15px;">
        <nobr>Named Colors:</nobr>
    </td>
</tr>
<script>
  document.write(writeRow(colors));
</script>
</table>
<table cellspacing="0" 
       cellpadding="0" 
       onmouseover="doOver()" 
       onmouseout="doOut()" 
       onclick="doClick()" 
       style="width: 180;">
<hr>
<script>
  document.write(writeRow(sysColors));
</script>
</table>
<hr>
<table>
  <tr>
    <td id="colorBox" style="border: 1px inset window;  width: 20; height: 20; font-size: 2px; cursor: default;">&nbsp;</td>
    <td id="colorName" style="border: 0; font-family: verdana, helvetica; font-size: 9px; color: button-text; cursor: default;">ColorName</td>
  </tr>
</table></body></html>


           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Color Chooser