January 22, 2000 - Color Depth

January 22, 2000 Color Depth Tips: January 2000 Yehuda Shiran, Ph.D. Doc JavaScript

The colorDepth property of the screen object reveals the user's color bit depth. This property is very helpful if you're interested in providing the most suitable image for the user's color resolution. For example, you can create two versions of an image -- one with an 8-bit palette (8bit.gif), and the other one with a 16-bit palette (16bit.gif). A simple script offers a dynamic image based on a user's capability to display it:

<SCRIPT LANGUAGE="JavaScript">
<!--
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS2 = (bName == "Netscape" && bVer == 2);
if (window.screen) {
  var url = (screen.colorDepth >= 16) ? "16bit.gif" : "8bit.gif";
  document.write("<IMG SRC='", url, "' HEIGHT='100' WIDTH='300'>");
} else if (!NS2) {
  document.write("<IMG SRC='8bit.gif' HEIGHT='100' WIDTH='300'>");
}
// -->
</SCRIPT>
<NOSCRIPT>
<IMG SRC="8bit.gif" HEIGHT="100" WIDTH="300">
</NOSCRIPT>

Notice the <NOSCRIPT>...</NOSCRIPT> definition which specifies a default image for browsers that cannot execute the script. The conditional statement in the script checks if the browser supports the screen object. If it doesn't, it prints the code for the default image. Navigator 2.0x doesn't support the <NOSCRIPT>...</NOSCRIPT> definition. In other words, it doesn't ignore its content. We set the LANGUAGE attribute of the <SCRIPT> tag to "JavaScript" so that all JavaScript-enabled browsers can execute the script. We then add an additional condition that prevents Navigator 2.0x from printing the image's code in the script. Thanks to this condition, Navigator 2.0x displays the image only once. Also note that this script cannot be used inside a table, because the document.write() method doesn't function properly within table cells.

Read more about the screen object in Column 17, Screen Properties.