Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


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

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
 
Comment and Contribute

 

 

 

 

 


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

 

 

Sitemap