• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 453
  • Last Modified:

Dynamically change image SRC

Hello,

How does one dynamically alter the background image based upon the screen resolution? Basically, I have 2 images. If the user is a laptop user, they will always be 1024. If they are a desktop user, they will always be 800. I want to alter tbe <Body Background="somepath.gif"> entry to reflect that when they open the page.

<Script language="javascript">
            function loadBackground ()      {
            if (screen.width<=800) {
                  //alert('800');
                                                //Document.write(Body HTML for Image800.gif)
                  }
                  else  {
                  //alert('greater than');
                                                //Document.write(Body HTML for Image1024.gif)
                  }
            }
</Script>
0
SWRO
Asked:
SWRO
1 Solution
 
aaronchanCommented:
Remember to add onload event on your <body>.  Good luck!

<Script language="javascript">
      function loadBackground()     {
            if (screen.width <= 800) {
                  //alert('800');
                  //Document.write(Body HTML for Image800.gif)
                  document.body.background = 'http://i.i.com.com/cnwk.1d/i/hdft/redball.gif';
            }
            else  {
                  //alert('greater than');
                  //Document.write(Body HTML for Image1024.gif)
                  document.body.background = 'http://www.experts-exchange.com/images/10Years.gif';
            }
      }
</Script>
<body onload="loadBackground();">
</body>
0
 
SWROAuthor Commented:
Thanks!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now