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.");
</script>

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."
            scientist.src=left(scientist.src,len(scientist.src)-4)+".jpg"
        end if
    end function	
</script>

Kurt Cagle

Submit a Tip

Browse "Java" Tips

Browse All Tips

0 Comments (click to add your comment)

Comment and Contribute