Javascript not working IE 8 on Windows

Question

Hi Everyone!

I have 4 images that I use as a navigation menu, when I click on one it lights up (changes image) and the current goes out, and so on so forth.

It works well in chrome and ff (no firebug errors)

But in IE8 the functioning of the clicks (where it changes the view of a div) work it just doesn't change the img src here's the code:

<li id="bulletli1">
<a href="#"> 
    <img id="bullethover1" src="img/bulleto.png" height="30px" width="30px" style="position:absolute">
<img id="bullet1" name="bullet1" height="30px" width="30px" src="img/bulletwhite.png" onmousedown="this.src='img/bulletwhite.png';document.images['bullet2'].src='img/bullet.png';document.images['bullet3'].src='img/bullet.png';document.images['bullet4'].src='img/bullet.png'" style="opacity:0.4;filter:alpha(opacity=40)"/> 
    </a></li> 

So basically what happens is inside onmousedown this.src gets set to the white bullet and all the others get set to the dark bullet point. There are no errors in the developer's tools.

Does this.src not work in IE8? Any advice would help, Thanks!

Answer 1

You shouldn't be embedding your JS into your code like this. While I advise using a library like jQuery (which will make your life easier), I'll explain without it.

Don't embed your JS into your code. If you really really need to, have it call a function like this:

<img id="bullet1" name="bullet1" height="30px" width="30px" src="img/bulletwhite.png" onmousedown="bulletClicked()" style="opacity:0.4;filter:alpha(opacity=40)"/>

Then in your head section between script tags you'll run your javascript:

function bulletClicked() {
   this.src='img/bulletwhite.png';
   document.images['bullet2'].src='img/bullet.png';
   document.images['bullet3'].src='img/bullet.png';
   document.images['bullet4'].src='img/bullet.png';
}

From what it looks like, you're going about this the wrong way, you're probably putting that onclikc code into every bullet image, slightly modified for each one. Instead, if you just used events you would simplify so much.

If you did something like this... (and specified your height, width, and other CSS in a style section, where they belong, don't do what you did, ever again).

<img id="bullet1" name="bullet1" src="img/bulletwhite.png" onmousedown="bulletClicked(this)"/>

Then your javascript could be...

function bulletClicked(e) {
   document.images['bullet1'].src='img/bullet.png';
   document.images['bullet2'].src='img/bullet.png';
   document.images['bullet3'].src='img/bullet.png';
   document.images['bullet4'].src='img/bullet.png';
   e.src='img/bulletwhite.png';
}

There are much better ways to deal with this sort of problem, and I would highly reccomend you pick up jQuery and do some work with separating your HTML, JavaScript and CSS components of your pages.

Answer 2

I cannot reproduce the described behavior. The images seem to get replaced OK. Any further details you can provide? What happens when you click on the other 3 images? Do they get their image URLs straight?

Answer 3

Hi,

please check out, if there doesn't exist more than 1 image with the same name/id-Attribute.

In that case, IE would take the last of the images with the same name(note that document.images['somename'] can be an Array ), while other UserAgents will take the first One. Maybe in that case you only don't see the change, for example if the changed image is outside the viewport.

greets