Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    different image dependent on screen resolution

    gdays guys,

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

    WIDTH and HEIGHT according to the resolution of the screen...

    screen detecting then choose image in stylesheet

    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

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts

    set src attribute to start with

    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"/>

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Roy Sinclair; 08-10-2004 at 05:31 PM.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #4
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by jamescover; 08-10-2004 at 07:37 PM.
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #6
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #8
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •