Questions Tags Users Unanswered

Latest version:

text color

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.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        #holder {
            border: 1px solid black;
            display: inline-block;
        }
        .field {
            float: left;
            margin: 10px;
            width: 20px;
            height: 20px;
            border: 1px solid black;
        }
        .clear {
            clear: both;
        }
        #preview {
            margin-top: 30px;
            color: white;
        }
    </style>
    <script>
        function OnColorChanged (color) {
            var preview = document.getElementById ('preview');
            preview.style.color = this._color;
        }

        function CreateColorPalette () {
            var holder = document.getElementById ('holder');
            var colors = ['000000', 'ff0000', '00ff00', '0000ff'];
            for (var i = 0; i < colors.length; i++) {
                var color = '#' + colors[i];
                var div = document.createElement ('div');
                div.style.backgroundColor = color;
                div._color = color;
                div.className = 'field';
                div.onclick = OnColorChanged;
                holder.appendChild (div);
            }
                // clearfix
            var div = document.createElement ('div');
            div.className = 'clear';
            holder.appendChild (div);
        }

        function Init () {
            CreateColorPalette ();
        }
    </script>
</head>
<body onload="Init ()">
    Click on the color fields.
    <div id="holder">
    </div>
    <div id="preview">
        Sample Text
    </div>
</body>
</html>

The above code you have suggested me for the color palette. But now i want to view the color palette only by clicking an image or a button. Please tell me how to do that.