Today is . Page created 10/05/02, updated 03/29/06

Color Changer On Mouseover

T his is another good color chart that webmasters can make very good use of. As you move your cursor over the color wheel, the background changes and gives you the hex code of the color.

W e have tested the code in IE6.0, Firefox1.5.0.1, Opera8.52, Netscape7.02, Netscape8.1 and AOL Explorer1.2. This script worked in IE, Opera8.52, and AOL Explorer1.2. All other platforms tested it will not work. It degrades well and you will not get any error messages.

D epending on your knowledge of HTML and java scripts, this is an easy, three part copy and paste code with an upload of a graphic. The first part gets pasted into the <HEAD> section of your document. The second part gets pasted directly into the <BODY> tag of your document. If you do not know how to add the onLoad event handler into the body tag, see the below example.

</head>
<body bgcolor="#000000" onLoad="capture()" text="#ba55dc" link="#fff8dc" alink="#fff8dc" vlink="#fff8dc">
<basefont size="3">

T he third part gets pasted into the <BODY> section of your document. Now the last part is to save the color wheel to your hard drive and upload it to your editor. If you don't know how to save the color wheel to your hard drive, just right click on it and "Save As". You will also see the color wheel sits in between two graphics called "00.gif". Notice the height is defined as "0". You need not concern yourself nor upload them if you don't want since they will not appear.

For your Information: When we received this script as of 03/30/02 the site for the script does not have the message for you to save and upload the color wheel to your editor. As of the same date, we have advised them of this, so don't forget to save and upload the color wheel! See the below example.
[ Save This Graphic ]

A s you can notice in the above code, the images do not have a full path to call the image. It is correct HTML coding to use the complete path to the image and not just the name.

T he above is the default that you will get from the script site. If you feel it is too large or bulky, click on our below "Example link" to see how we have made it into a smaller, convenient pop up that can be incorporated into more pages like HTML generators that do not have a color chart option included. Also you can follow the below link for how we incorporated this color chart into one of our online page builders.
[ Page Builder ]

A ll we did to achieve this effect was to remove the 2 lines of code for the two img src="00.gif" images (that do not appear anyway because of the height=0 defined) and add the below table ( See Link For Table Configurations ) around the body section of the script. You will notice on the table configurations page that there is a part marked "Optional". This is the little table that is above our table version that says "Move Your Cursor Over The Color Wheel". This you can remove if you do not want it there.
[ Color Changer Example ]
[ Table Configurations ]

Y ou can also use this convenient little java script for your pop up window if you would like. The below is configured just as ours is.

<A HREF="javascript:void(0)" ONCLICK="open
('Path To Your Color Changer', 'myannouncer','toolbar=0,location=0, resizable=0,scrollbars=0,width=435,height=475')">
Color Changer Example</A>

P ay particular attention to the placement of the apostrophe's ' and quotation marks " within the above little code. Do Not change them or the pop up will Not work!

W e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. We have searched the [ Original Script Site ] and to the best of our abilities cannot locate the script on their server. Therefore we are now archiving the code for your convenience. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]

Search Our Site By Individual letter

[ A ] [ B ] [ C ] [ D ] [ E ] [ F ] [ G ] [ H ] [ I ] [ J-K ] [ L ]
[ M ] [ N-O ] [ P-Q ] [ R ] [ S ] [ T ] [ U-V ] [ W ] [ X-Y-Z ]

Little Tips Directory

[ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ]

[ Index Page 1 ] [ Index Page 2 ] [ Index Page 3 ] [ Index Page 4 ] [ Index Page 5 ]
[ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ]
[ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ]

[ News Letter Archives ] [ Navigation Page ] [ Archives Of Published Material ]
[ Link To Us ] [ Alphabet Index ] [ Feedback ] [ On Line Support ] [ FAQ ]
[ Webmaster Utilities ] [ Casino ] [ Banner Exchange ] [ Advanced Site Search ]

If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today

This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.