Questions Tags Users Unanswered

text color

Question is answered.
1 answer (2 voices) (9002 views)
Tags:
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.
1 Answer
Hi,

the following code shows how to show/hide a color palette:

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

        function CreateColorPalette () {
            if (colorPalette) {
                return;
            }
            colorPalette = document.createElement ('div');
            colorPalette.className = "colorPalette";

            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;
                colorPalette.appendChild (div);
            }
                // clearfix
            var div = document.createElement ('div');
            div.className = 'clear';
            colorPalette.appendChild (div);

            document.body.appendChild (colorPalette);
        }

        function ShowColorPalette () {
            CreateColorPalette ();
            colorPalette.style.display = "";
        }

        function HideColorPalette () {
            CreateColorPalette ();
            colorPalette.style.display = "none";
        }
    </script>
</head>
<body>
    <button onclick="ShowColorPalette ()">Change Color</button>
    <div id="preview">
        Sample Text
    </div>
</body>
</html>
Thanks Dottoro. But still having some issues. The code u've given is very useful. But the code i am using is [CODE] <html> <head> <script type="text/javascript"> function getColor1() { alert("hai"); var img = document.createElement("img"); img.src = "img/palette.gif"; //img.height = 75; //img.width = 113; //img.style.top=800; //img.style.right=100; document.body.appendChild(img); //getColor(); } /*function getColor(block) {alert("hai1"); var s_url=block.href; var pColor=s_url.substr(s_url.indexOf("#")); document.getElementById("colorPalDemo").style.fontColor=pColor; getColor1(); }*/ </script> </head> <body> <img src="img/supst.png" usemap="#color_pallete" onClick="getColor1();" /> <map name="color_pallete" id="color_pallete"> <area shape="rect" coords="7,7,31,30" href="#FF0000" onclick="getColor(this);" /> <area shape="rect" coords="35,7,59,30" href="#00FF00" onclick="getColor(this);" /> <area shape="rect" coords="63,7,87,31" href="#0000FF" onclick="getColor(this);" /> <area shape="rect" coords="92,7,115,31" href="#8B008B" onclick="getColor(this);" /> <area shape="rect" coords="7,33,30,58" href="#00FFFF" onclick="getColor(this);"/> <area shape="rect" coords="36,34,59,57" href="#006400" onclick="getColor(this);" /> <area shape="rect" coords="63,34,86,58" href="#6B8E23" onclick="getColor(this);" /> <area shape="rect" coords="92,35,115,57" href="#00FF7F" onclick="getColor(this);" /> <area shape="rect" coords="8,61,31,85" href="#32CD32" onclick="getColor(this);" /> <area shape="rect" coords="35,62,59,85" href="#7FFFD4" onclick="getColor(this);" /> <area shape="rect" coords="64,61,86,85" href="#7FFF00" onclick="getColor(this);" /> <area shape="rect" coords="92,61,115,85" href="#008B8B" onclick="getColor(this);" /> <area shape="rect" coords="91,88,115,111" href="#9932CC" onclick="getColor(this);" /> <area shape="rect" coords="64,88,87,111" href="#00BFFF" onclick="getColor(this);" /> <area shape="rect" coords="36,88,59,112" href="#1E90FF" onclick="getColor(this);" /> <area shape="rect" coords="8,88,30,111" href="#FF4500" onclick="getColor(this);" /> </map> <span id="colorPalDemo"></span> </body> </html> [CODE] It works fine when clicking the image but the color palette, i cann't able to click. Please tell me what i'm doing wrong here. - tweety -
Thanks Dottoro. But still having some issues. The code u've given is very useful. But the code i am using is [CODE] <html> <head> <script type="text/javascript"> function getColor1() { alert("hai"); var img = document.createElement("img"); img.src = "img/palette.gif"; //img.height = 75; //img.width = 113; //img.style.top=800; //img.style.right=100; document.body.appendChild(img); //getColor(); } /*function getColor(block) {alert("hai1"); var s_url=block.href; var pColor=s_url.substr(s_url.indexOf("#")); document.getElementById("colorPalDemo").style.fontColor=pColor; getColor1(); }*/ </script> </head> <body> <img src="img/supst.png" usemap="#color_pallete" onClick="getColor1();" /> <map name="color_pallete" id="color_pallete"> <area shape="rect" coords="7,7,31,30" href="#FF0000" onclick="getColor(this);" /> <area shape="rect" coords="35,7,59,30" href="#00FF00" onclick="getColor(this);" /> <area shape="rect" coords="63,7,87,31" href="#0000FF" onclick="getColor(this);" /> <area shape="rect" coords="92,7,115,31" href="#8B008B" onclick="getColor(this);" /> <area shape="rect" coords="7,33,30,58" href="#00FFFF" onclick="getColor(this);"/> <area shape="rect" coords="36,34,59,57" href="#006400" onclick="getColor(this);" /> <area shape="rect" coords="63,34,86,58" href="#6B8E23" onclick="getColor(this);" /> <area shape="rect" coords="92,35,115,57" href="#00FF7F" onclick="getColor(this);" /> <area shape="rect" coords="8,61,31,85" href="#32CD32" onclick="getColor(this);" /> <area shape="rect" coords="35,62,59,85" href="#7FFFD4" onclick="getColor(this);" /> <area shape="rect" coords="64,61,86,85" href="#7FFF00" onclick="getColor(this);" /> <area shape="rect" coords="92,61,115,85" href="#008B8B" onclick="getColor(this);" /> <area shape="rect" coords="91,88,115,111" href="#9932CC" onclick="getColor(this);" /> <area shape="rect" coords="64,88,87,111" href="#00BFFF" onclick="getColor(this);" /> <area shape="rect" coords="36,88,59,112" href="#1E90FF" onclick="getColor(this);" /> <area shape="rect" coords="8,88,30,111" href="#FF4500" onclick="getColor(this);" /> </map> <span id="colorPalDemo"></span> </body> </html> [CODE] It works fine when clicking the image but the color palette, i cann't able to click. Please tell me what i'm doing wrong here. - tweety -
15 30 50 per page

Your Answer

Limit of files to attach: 3 / Max total size: 1024 KB
File:
Description:
remove