Login   Register  
Icontem

File: modify_colors.html

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  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: 2011-04-25 11:54
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>