While the majority of computers that are
on-line make use of graphics cards that allow at least 16-bit Color
depths, there are still a sizable portion of users who can only
view 256 colors. Ideally, every time you create a graphic for your
web page you should design it using only web-safe colors. However,
there are times when its just not possible to get a certain
graphical effect (like gradients) to display properly in just 256
colors.
One way around this problem is to create two versions of your
image: a 16-bit version and a 256 color version. Once this is done,
you can use javascript and cascading style sheets to dynamically
decide which image will be presented to the browser based on its
available colors.
First, you need to create a file with the extension ".js" (for
this example, we'll call it "stylesheet.js"). This will be used as
the source code for a SCRIPT tag that you will insert into your web
page. In the following scenario we'll say that we have two versions
of our web page logo. We need to create a STYLE tag to be written
onto the web page -- this is so that NetScape will be able to
properly show the image (NetScape will not handle this image
properly if the background-image property is set in a .CSS file, it
has to be an in-line style attribute). We'll also add in a link to
a seperate .CSS file, in case we want to use colors for our
backgrounds and texts that are not web safe.
The code for this .js file should look like this:
Next, we need to set up our web page to handle the STYLE tag.
We'll create a SCRIPT tag and set the SRC property to our
newly-created .JS file. Then, in order to display our image, we'll
create a TABLE and set a TD tag within the table to our "logo"
class that we created with our .js file. That way, users with only
256 colors will get the image that they can view properly. This is
how our web page would look:
**Update**
One problem you may have with this approach is that, if the IE
Window is resized, a part of your image may be cut off (because its
set as the background of the table, and the table automatically
resizes itself every time the IE window is resized). The solution
to this is to force the table to maintain a certain height and
width. The easiest way to do this is to insert a blank gif (a gif
that has 100% transparancy) and then set the height and width of
the IMG tag containing the image. (Need a blank gif? Click here -- then right click
the page, choose "Select All," rightclick the small dot that
appears, and save the image)
For this example, lets say that your logo is 500 pixels wide and
200 pixels high. Assuming you've set your page up following our
guidelines above, here is what it would look like:
Related Links: Detect Browser Type | Detect Plug-Ins |