File: testColor.html

Recommend this page to a friend!
  Classes of Chris Jeffries   JavaScript Color Object   testColor.html   Download  
File: testColor.html
Role: Example script
Content type: text/plain
Description: example of use
Class: JavaScript Color Object
Create and manipulate color values
Author: By
Last change: Updated to test the .getRelative() method
Date: 7 years ago
Size: 1,400 bytes
 

Contents

Class file image Download 
<!DOCTYPE HTML>
<html>
<head>
<title>Test Colour object</title>
<script src='Colour.class.js'></script>
<script>

	function showit(e)
	{
		var target = document.getElementById('target');
		
		c = new Colour(e.value, 'rgb');
		
		var result;
		result =  '<dl>';

		result += '<dt style="background-color:'+c.rgbS+ '">rgbA</dt><dd>' + c.rgbA[0] + ',' + c.rgbA[1] + ',' + c.rgbA[2] + '</dd>';

		c.changeHue(120);

		result += '<dt style="background-color:'+c.rgbS+ '">rgbA+120</dt><dd>' + c.rgbA[0] + ',' + c.rgbA[1] + ',' + c.rgbA[2] + '</dd>';

		c.changeHue(120);

		result += '<dt style="background-color:'+c.rgbS+ '">rgbA+240</dt><dd>' + c.rgbA[0] + ',' + c.rgbA[1] + ',' + c.rgbA[2] + '</dd>';

		c.changeHue(120);

		result += '<dt style="background-color:'+c.rgbS+ '">rgbA+360</dt><dd>' + c.rgbU + '</dd>';

		c.setSaturation(20);
		result += '<dt style="background-color:'+c.rgbS+ '">rgbA+360 saturation=20%</dt><dd>' + c.rgbA[0] + ',' + c.rgbA[1] + ',' + c.rgbA[2] + '</dd>';

		var d = c.getRelative([0,100,20]);
		result += '<dt style="background-color:'+d.rgbS+ '">rgbA+50 s and l unchanged</dt><dd>' + d.rgbA[0] + ',' + d.rgbA[1] + ',' + d.rgbA[2] + '</dd>';
		
		result += '</dl>';
		
	
		target.innerHTML = result;
	}
</script>
</head>
<body>
 <input onchange='showit(this);' value='#FF0000'><br>
 <div id='target'></div>
</body>
</html>