different image dependent on screen resolution

Black Thunder · 08-10-2004, 02:20 AM

gdays guys,

found a couple of old threads which relate closely to what i want to do:

http://www.codingforums.com/showthre...e+screen+width

http://www.codingforums.com/showthre...e+screen+width

but they don't quite seem to be able to solve my problem, although they did give me a few ideas

basically, i design a web-site for my cricket club at www.eastscricket.com.au

i want to redesign the top banner of the page, and it is looking good except for one problem.

For 800x600 screen resolutions, i have an image which makes it look perfect.
For larger screen resolution, i have a different image which makes it look perfect.

I'm trying to incorporate both images into the page but only one will show up depending on the screen resolution of the user.

the script i have in place so far is:

Code:

<html>
<head>

<SCRIPT language="JavaScript"> 
function loadPic()
{
   sw = parseInt(screen.width);
   if (sw<=800)
   { 
      document.getElementById('image').src="icons\headers\01bottomlow.gif"; 
   }
   else 
   {
      document.getElementById('image').src="icons\headers\01bottomhigh.gif"; 
   } 
} 
</SCRIPT>

</head>


<BODY onLoad="loadPic()">

<!--irrelevant code--!>

<IMG id="image">

<--irrelevant code--!>

</body>
</html>

anyone got any ideas because i can honestly not see how that isn't coming together to work and it's getting VERY frustrating indeed

thanks for any help

jbot · 08-10-2004, 09:35 AM

add a blank image to the original img tag. you're trying to set the src of the img, but there's no src attribute to set the value of.

therefore, try this:

Code:

<img id="image" src="blank.gif"/>

Roy Sinclair · 08-10-2004, 05:23 PM

Actually this is a case where you should be doing this inline and not onload:

Code:

<html>
<head>
</head>


<BODY onLoad="loadPic()">

<!--irrelevant code--!>

<SCRIPT language="JavaScript"> 
function loadPic()
{
   sw = parseInt(screen.width);
   if (sw<=800)
   { 
      document.write ("<img src=\"icons\headers\01bottomlow.gif\">"); 
   }
   else 
   {
      document.write ("<img src=\"icons\headers\01bottomhigh.gif\">"); 
   } 
} 
</SCRIPT>

<--irrelevant code--!>

</body>
</html>

This way the correct image is loaded WITH the rest of page instead of after the page.

There is still a problem though, the code you've currently got uses screen.width which is the resolution the user's computer monitor is set to display and not necessarily the size that the user's browser has available. If the user doesn't run their browser full screen they may get the wrong image.

jamescover · 08-10-2004, 07:28 PM

Quote:

There is still a problem though, the code you've currently got uses screen.width which is the resolution the user's computer monitor is set to display and not necessarily the size that the user's browser has available. If the user doesn't run their browser full screen they may get the wrong image.

-james

Roy Sinclair · 08-10-2004, 09:10 PM

I have a 21" monitor running 1280x1024 resolution but I run a browser window closer to 800x600, I have the large monitor and the high resolution so I can have multiple windows open side by side as no single application I normally use needs all of that space for itself. The script as you have it now bases the image presented on how much potential space is available (1280x1024) v.s. how much space has actually been provided (800x600).

This link may be of help: http://www.howtocreate.co.uk/tutoria...?tut=0&part=16

jamescover · 08-11-2004, 12:14 AM

Quote:

I have a 21" monitor running 1280x1024 resolution but I run a browser window closer to 800x600, I have the large monitor and the high resolution so I can have multiple windows open side by side as no single application I normally use needs all of that space for itself. The script as you have it now bases the image presented on how much potential space is available (1280x1024) v.s. how much space has actually been provided (800x600).

Thanks for the clarification, Roy.

Yet wouldn't you agree that yours' is a rare case. But be that as it may, I would assume that most of the sites that you visit do not code for such senarios. Would my assumption be incorrect?

just wondering,

-james

Roy Sinclair · 08-11-2004, 09:00 PM

My specific case may be rare but a lot of people don't run their browser full screen so overall there's a large population. And because they don't run full screen their overall browser resolution may be a lot different than any expected monitor resolution.

jamescover · 08-12-2004, 12:25 AM

Quote:

My specific case may be rare but a lot of people don't run their browser full screen so overall there's a large population. And because they don't run full screen their overall browser resolution may be a lot different than any expected monitor resolution.

Fair enough. But I'd hazard to guess that those people are web developers of one sort or another, and not the general web populace. Or, maybe, that's just my skewed perception. After all, I'm still surfing at 800x600 most days...still, it's something to consider.

Thanks, for the feedback, Roy.

-james