File: modify_colors.html

Recommend this page to a friend!
  Classes of Arturs Sosins   Color manager   modify_colors.html   Download  
File: modify_colors.html
Role: Example script
Content type: text/plain
Description: Example modifying color properties
Class: Color manager
Parse, manipulate and convert color values
Author: By
Last change: credits changed
Date: 12 years ago
Size: 2,396 bytes
 

Contents

Class file image Download
<!-- /************************************************************* * This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com * Fee free to distribute and modify code, but keep reference to its creator * * Color manager class aaccepts multiple color formats, * allows to modify color properties like rgb, hsl and alpha values, * and allows to convert colors back to different color formats * * For more information, examples and online documentation visit: * http://webcodingeasy.com/JS-classes/Cross-format-color-manager **************************************************************/ --> <html> <head> </head> <body> <div style='border: 1px solid black; width: 100px; height: 100px;' id='test'></div> <script type="text/javascript" src="./color_manager.packed.js" ></script> <script type="text/javascript"> //create rating instance var cm = new color_manager("green"); var div = document.getElementById("test"); //applying color to div element div.style.backgroundColor = cm.to_hex(); //make color darker by changing light attribute from hsl function darker(){ if(cm.l > 0) { cm.modify_hsl(cm.h, cm.s, cm.l-5); div.style.backgroundColor = cm.to_hex(); setTimeout("darker();", 100); } } //make color brighter by changing light attribute from hsl function brighter(){ if(cm.l < 100) { cm.modify_hsl(cm.h, cm.s, cm.l+5); div.style.backgroundColor = cm.to_hex(); setTimeout("brighter();", 100); } } var timeout; //rotate hue value from hsl function color_rotate(){ cm.modify_hsl(cm.h + 5 , cm.s, 25); div.style.backgroundColor = cm.to_hex(); timeout = setTimeout("color_rotate();", 100); } //get color information function get_color(){ alert("red: " + cm.r + " " + "green: " + cm.g + " " + "blue: " + cm.b + "\n" + "hue: " + cm.h + " saturation: " + cm.s + " light: " + cm.l + "\n" + "alpha: " + cm.a); } </script> <p><input type='button' onclick='brighter();' value='Brighten'/> &nbsp;&nbsp;&nbsp; <input type='button' onclick='darker();' value='Darken'/> <p> <p> <input type='button' onclick='color_rotate();' value='Rotate color'/> &nbsp;&nbsp;&nbsp; <input type='button' onclick='clearTimeout(timeout);' value='Stop rotation'/> </p> <p> <input type='button' onclick='get_color();' value='Get color info'/> </p> </body> </html>