Browse DevX
Sign up for e-mail newsletters from DevX

Tip of the Day
Language: Web
Expertise: Intermediate
Jan 14, 2000



Building the Right Environment to Support AI, Machine Learning and Deep Learning

Display Graphics Using the colorDepth Property

Browsers Targeted: Internet Explorer 4+

Designing effective Web graphics is always a challenge—you want to provide the best looking graphics on all platforms, but when one person runs their browser in 8-bit color (for example, 8 bits or one byte to represent a look-up table of colors) and another runs it at 32-bit color, providing the best experience for both of them can prove difficult. One way to partially circumvent this problem is to use the screen.colorDepth property. This read-only property queries the system and returns the number of bits per pixel currently set.

<div id="monitorDepth" />
<script language="JavaScript">
	monitorDepth.innerHTML=("This monitor is currently set to
 "+screen.colorDepth+" bit depth.");

Once you have the color depth, you can use this information to set the characteristics of images to display at a higher color depth. For example, this script will automatically load a low color-depth image first, then if the resolution supports it, it will load the higher resolution image:

<img id="scientist" src="JillianHiPriestess.gif" /><button 
onclick="upgradeImage()">Upgrade Image</button>
<script language="VBscript">
    function upgradeImage()
        if (screen.colorDepth=16) or (screen.colorDepth=24) or _
            (screen.colorDepth=32) then
            alert "Image can upgrade."
        end if
    end function	
Kurt Cagle
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date