Purpose
The purpose of this project is to
translate standard X11 color names that aren't web color names to their
RGB hex triplet values on the fly.
This allows you to use color names that web browsers won't understand,
but still get the proper colors in your HTML and CSS presentation.
How It Works
This module does three things, in order:
- It searches all the document's style sheets and replaces any color names
that it finds in its dictionary with their RGB hex triplet equivalents.
It looks for both "color" and "background-color" references.
- It searches all the inline styles in your HTML document and does the
same thing. The strategy is a little different, because it obtains the
color information from the text strings, and not from the style object,
because for some reason the style object doesn't always have the full
information. (I think this happens when you insert styled objects
into the DOM using JavaScript.)
- It searches all the HTML element "color" and "bgcolor" attributes,
which aren't allowed in HTML5 documents, but may be used in older HTML 4
documents.
Example
The X11 Color Swatches page uses this module to
parse the color names.
Getting Started
Here is how to use this on your own page.
- Download the file morecolors.js
and reference it in the head section
of your HTML file like this:
<script type="text/javascript" src="morecolors.js"></script>
- Add this JavaScript code at the bottom of your file or in an onload event
handler. Make sure this code is executed after any other JavaScript code that might
add HTML elements that have inline styles.
<script type='text/javascript'>
moreColors.applyColorNameChanges();
</script>