Swapping images using javascript

Question

I just started reading about JavaScript. As a language, I don't have any trouble with it, but I came across an annoying situation.

I was going to try my first JavaScript function for a simple action: changing the src attribute of an <img>.

So let's imagine I have this code in index.html:

function activate(id) {
  document.images(id).src = "home-on.jpg";
}

function deactivate(id) {
  document.images(id).src = "home-off.jpg";
}

<img id="home" src="home-off.jpg" onmouseover="activate('home')" onmouseout="deactivate('home')"/>

The code works perfectly on Google Chrome (swapping the image when the mouse is over, and out), but I have no luck with Firefox.

Any help?

advice: use css to perform this function :)

Jason
– Jason

2009-12-31 23:41:29 +00:00
Commented Dec 31, 2009 at 23:41 — Jason
– Jason, Commented Dec 31, 2009 at 23:41

SLaks · Accepted Answer · 2009-12-31 22:55:35Z

6

You're using the wrong syntax to get the images.

You need to write document.images[id] (With brackets [], not parentheses ())

The document.images collection is an associative array, which is indexed using brackets.
Parentheses are used to invoke a function; I don't know why your code worked in Chrome.

answered Dec 31, 2009 at 22:55

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

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

5 Comments

Elle H Over a year ago

Yes, and he can also consider just using document.getElementById(id) as well.

Fabzter Over a year ago

Well thank you. I wasn't aware that document.iamges was an array, I actually thought it was a function! . And yes, I'm a programmer so I know how functions are usually invoked.

SLaks Over a year ago

You'd be surprised by the average level of some of the beginners here. Also, had you been coming from VB, the distinction would have been new to you.

Fabzter Over a year ago

Why? is the average level too slow or too high?

SLaks Over a year ago

For some people, far too low.

Qantas 94 Heavy · Accepted Answer · 2013-12-18 14:56:51Z

1

SLaks has entered the correct answer for this particular question.

However, you will find in JavaScript that there is a lot of cases like this where incorrect syntax will work in one browser but not in the next. For ensuring that you maintain cross browser compatibility in JavaScript you might find a library such as jQuery very handy. Not only does it attempt to ensure that your JavaScript code is compatible with all browsers, it also extends a lot of great functionality.

edited Dec 18, 2013 at 14:56

Qantas 94 Heavy

16k31 gold badges74 silver badges89 bronze badges

answered Dec 31, 2009 at 22:59

Chris Nicol

10.4k7 gold badges41 silver badges50 bronze badges

1 Comment

Fabzter Over a year ago

Than you, I was already thinking in using jQuery, but I wanted to start from the ground before getting into frameworks. :-)

Collectives™ on Stack Overflow

Swapping images using javascript

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related