Javascript changing source of an image

Question

Hi Everyone! I have some javascript which runs a timer that animates something on the website.

It all works perfectly but I want to get an image to change when the animation is run, It uses jquery:

if(options.auto && dir=="next" && !clicked)
{
    timeout = setTimeout(function(){
if (document.images['bullet1'].src == "img/bulletwhite.png")
{
        document.images['bullet1'].src = "img/bullet.png";
        document.images['bullet2'].src = "img/bulletwhite.png";
}
animate("next",false);
                    },diff*options.speed+options.pause);
                }

options.auto means that its automatically cycling, dir is the direction of the motion and clicked is whether or not the user clicked it.

Is there something wrong with my syntax here? I ran firebug with it, and it doesn't throw any errors, it simply won't work. Any advice would help!

I should mention that the src of bullet1 starts at bulletwhite.png and then I was hoping for it to change to bullet.png and have bullet2 change to bulletwhite.png.

Answer 1

According to the code you've posted there's a strange semicolon on second line, but maybe it's just a typo.

Why don't you try a JQuery attr() call instead of using document.images array?

$('img[name="bullet1"]').attr('src', 'img/bullet.png');

Answer 2

document.images['bullet1'].src == "img/bulletwhite.png"

Are you sure this condition is ever met?

Usually the imageElement.src property holds absolute/resolved version of what is in the src attribute. (This also applies to href attribute/property.)

<img src="/images/img1.png">

...

document.images[0].src => "http://127.0.0.1/images/img1.png"