Re: Screen Resolution

Hi,

JavaScript to insert images based Screen resolution:

<script type="text/javascript" language="JavaScript">
<!-- // Inserts image based on screen width
if (screen.width == 800){
document.write("<img src='images/marshallnz_m.gif' alt='' width='250'
height='64'><br><img src='images/photoinfo800.jpg' width='270' height='197'
alt='Scorching Bay' border='0'>");
}
else if (screen.width > 800){
document.write("<img src='images/marshallnz_m.gif' alt='' width='250'
height='64'><br><img src='images/photoinfo800.jpg' width='320' height='200'
alt='Scorching Bay' border='0'>");
}
else if (screen.width <= 640){
document.write("<img src='images/marshallnz640_m.gif' alt='' width='190'
height='64'><br><img src='images/photoinfo.jpg' width='204' height='130'
alt='Scorching Bay' border='0'>");
}
// -->
</script>

JavaScript for redirection based on screen resolution:

<script="JavaScript" type="text/javascript">
<!-- // Redirects based on screen res
if ((screen.width == 640) && (screen.height == 480))
        window.location.href= "http://www.yoursite.com/640";
else if ((screen.width == 800) && (screen.height == 600))
        window.location.href= "http://www.yoursite.com/800";
else if ((screen.width == 1024) && (screen.height == 768))
        window.location.href= "http://www.yoursite.com/1024";
else window.location.href= "http://www.yoursite.com/";
// -->
</script>

JavaScript to insert image based on color depth for IE:
Note colorDepth specifies the base-2 logarithm of the number of colors
allocated by the web browser, so 8 is used for 256 colors. The
screen.pixelDepth property provides this for Nutscrape.

<script language="JavaScript" type="text/javascript">
<!-- //
if (screen.colorDepth <= 8) {
document.write("<img src='images/homeleft.gif' width=274 height=160 alt=''
border=0>");
}
else {
document.write("<img src='images/homelefthigh.gif' width=274 height=160
alt='' border=0");
}
// -->
</script>

Someone asked about which screen res to cater for, well I think most people
still use 800x600, but I try to cater for 1024x800 as well, since that will
become the norm one day no doubt. It's good to test on all 3 screen
resolutions and just make sure your site is actually veiwable. You can use
the top code here to add text also for the larger screen res to fill any
large gaps.

Hope this helps.

Michelle.

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA