Changing an image woes in JavaScript

  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

Ok we'll start off with the code I'm using:
Code: [ Select ]
...
<body>
<script language="JavaScript">
if (screen.width<2000)
{
document.getElementById('header_img').src = "images/800newbefre.jpg";
}
</script>

<div id='header'>
    <img id='header_img' src='images/newbefre.jpg' />
</div>
...
  1. ...
  2. <body>
  3. <script language="JavaScript">
  4. if (screen.width<2000)
  5. {
  6. document.getElementById('header_img').src = "images/800newbefre.jpg";
  7. }
  8. </script>
  9. <div id='header'>
  10.     <img id='header_img' src='images/newbefre.jpg' />
  11. </div>
  12. ...

(dots just signify more to page but all unrelevant)

As you can see anybody with a normal resolution under 2000px (got tired of running over to dads computer) should get images/800newbefre.jpg. However I get this error:

Code: [ Select ]
Error: document.getElementById("header_img") has no properties
Source File: http://before-reality.net/newbefre/
Line: 12
  1. Error: document.getElementById("header_img") has no properties
  2. Source File: http://before-reality.net/newbefre/
  3. Line: 12


Anyone have any idea what I am doing wrong? Is it because of the nesting? I didn't think nesting mattered with getElementById();

Any help would be appreciated!
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I don't think you can refer to the element by id before it has actually been created and your script comes before the img itself. Since your code isn't inside a function called from later in the page, it's running immediately and there's not an element with that id yet.

Maybe you could use document.write and a noscript tag instead. I think that's what bwm used to use with the old ozzu logo.:

Code: [ Select ]
<script language="JavaScript">
if (screen.width < 2000) {
    document.write("<div id='header'><img id='header_img' src='images/small.gif' /></div>");
}
else {
    document.write("<div id='header'><img id='header_img' src='images/big.gif' /></div>");
}
</script>
<noscript>
<div id='header'><img id='header_img' src='images/small.gif' />
</noscript>
  1. <script language="JavaScript">
  2. if (screen.width < 2000) {
  3.     document.write("<div id='header'><img id='header_img' src='images/small.gif' /></div>");
  4. }
  5. else {
  6.     document.write("<div id='header'><img id='header_img' src='images/big.gif' /></div>");
  7. }
  8. </script>
  9. <noscript>
  10. <div id='header'><img id='header_img' src='images/small.gif' />
  11. </noscript>
  • _Leo_
  • Proficient
  • Proficient
  • User avatar
  • Posts: 279
  • Loc: Buenos Aires, Argentina

Post 3+ Months Ago

Try this:

Code: [ Select ]
<script language="JavaScript">
if (screen.width<2000)
{
document.images.namedItem('header_img').src = "images/800newbefre.jpg";
}
</script>
  1. <script language="JavaScript">
  2. if (screen.width<2000)
  3. {
  4. document.images.namedItem('header_img').src = "images/800newbefre.jpg";
  5. }
  6. </script>


It's DOM Level 2 Compliant and should work.
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

RichB was correct...it's all fixed now :)

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 114 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.