rgbcolors.html
2.09 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<?xml version="1.1" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>RGBColor test</title>
<style type="text/css">
#result {
margin: 5px;
width: 50px;
height: 50px;
}
#result-wrap {
border: 1px solid #999999;
width: 60px;
height: 60px;
margin: 5px;
}
body {
font-family: Arial;
}
</style>
<script type="text/javascript" src="../rgbcolor.js"></script>
<script type="text/javascript">
function isThatAColor(s) {
var color = new RGBColor(s);
if (color.ok) {
document.getElementById('result').style.backgroundColor = 'rgb(' + color.r + ', ' + color.g + ', ' + color.b + ')';
document.getElementById('result-text').innerHTML =
'Red: ' + color.r
+ '<br />Green: '
+ color.g
+ '<br />Blue: '
+ color.b
+ '<br />RGB: '
+ color.toRGB()
+ '<br />Hex: '
+ color.toHex();
} else {
document.getElementById('result-text').innerHTML = 'Never heard of such a color :(';
document.getElementById('result').style.backgroundColor = 'rgb(255, 255, 255)';
}
}
function showHelp() {
var color = new RGBColor('');
document.getElementById('help').innerHTML = '';
document.getElementById('help').appendChild(color.getHelpXML());
}
</script>
</head>
<body>
<h1>RGB color parser demo</h1>
<p>This is a demo of the RGBColor JavaScript class. Just type in something that should be a color and navigate away from the input field. The script will try to parse your input and derive a valid color.</p>
<p>For ideas on what's possible, click "Help?"</p>
<p>
More info in <a href="http://www.phpied.com/rgb-color-parser-in-javascript/">this blog posting</a>.
</p>
<form action="" onsubmit="isThatAColor(this.elements[0].value); return false;">
<div>
<input type="text" value="" onblur="isThatAColor(this.value)" />
</div>
</form>
<div id="result-wrap">
<div id="result"></div>
</div>
<div id="result-text"></div>
<p />
<span onclick="showHelp()" style="cursor: pointer; text-decoration: underline">List</span>
<div id="help"></div>
</body>
</html>