Javascript changing source of an image

Question

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.

You have a misplaced semicolon on the 2nd line. Probably not the answer you're looking for, but just wanted to let you know. — lewiguez
– lewiguez, Commented Jun 7, 2010 at 20:28
I guess that the last line should not be with a semicolon as well — Oskar Kjellin
– Oskar Kjellin, Commented Jun 7, 2010 at 20:29
Hard to say with all those conditions which we don't know. Are you sure it reaches the lines you want? — Mads Mogenshøj
– Mads Mogenshøj, Commented Jun 7, 2010 at 20:31
the lines are green in firebug so I believe even the if statement is triggering as true, I also tried trying to grab the images with getElementById to no avail — Doug Molineux
– Doug Molineux, Commented Jun 7, 2010 at 20:34

Jaroslav Záruba · Accepted Answer · 2010-06-07 20:48:51Z

1

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"

edited Jun 7, 2010 at 20:48

answered Jun 7, 2010 at 20:40

Jaroslav Záruba

4,8785 gold badges41 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Doug Molineux Over a year ago

hmm interesting, would this also apply to getElementById?

Jaroslav Záruba Over a year ago

It does not have anything to do with how you obtain reference to the image element, it is still the same element. (In other words: yes.)

mamoo · Accepted Answer · 2010-06-07 21:19:59Z

0

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');

edited Jun 7, 2010 at 21:19

answered Jun 7, 2010 at 20:39

mamoo

8,1762 gold badges31 silver badges38 bronze badges

3 Comments

Jaroslav Záruba Over a year ago

What is the supposed advantage of using jQuery here over native and w3c-compliant document.images? It is also quite likely that the jQuery approach is a bit slower: parsing the selector expression (+ there's probably some more stuff hidden behind '$(...)') vs. accessing collection property via key

Jaroslav Záruba Over a year ago

In other words I was right - you were comparing property to attribute, and it has also nothing to do with jQuery. Also name attribute is deprecated. :)

mamoo Over a year ago

@Pete: argh! 'image' is really bad! Sorry... I'll correct it.

Collectives™ on Stack Overflow

Javascript changing source of an image

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related