Move image with javascript

Question

What is wrong with this function?

function moveColor()
 {
 document.getElementById(purple).style.marginRight = "34px";
 }

with this html:

<div><img src="images/purple.png" id="purple" onclick="colorpurple()" onmouseover="moveColor()" style="cursor:pointer;"/></div>

I also wanted to have it move over a period of 1 second, but can't seem to solve this simple problem.

you might want to look into jquery animate function api.jquery.com/animate (there is sample code in the middle of the page) — dnsmkl
– dnsmkl, Commented May 16, 2012 at 19:27
What does "wanted to have it move over a period of 1 second" mean? You want it to slide over? You can use CSS3 transforms for that or jQuery Animate to do it easily. — Jamund Ferguson
– Jamund Ferguson, Commented May 16, 2012 at 19:29
I also suggest jQuery, all you'd have to do is: $('#purple').animate({'margin-right':'34px'},1000) — Belladonna
– Belladonna, Commented May 16, 2012 at 19:36

Gabriele Petrioli · Accepted Answer · 2012-05-16 19:25:32Z

5

You need to put the id in quotes (so that it is treated as a string).

document.getElementById('purple').style.marginRight = "34px";

The current usage means that purple refers to a variable, which is not defined so it has an undefined value and so the document.getElementById method returns nothing..

answered May 16, 2012 at 19:25

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

Comments

Bruno Costa · Accepted Answer · 2012-05-16 19:27:47Z

0

Seems like you missed the quotes on the function getElementById.

Like this:

function moveColor() { 
      document.getElementById('purple').style.marginRight = "34px";
}

answered May 16, 2012 at 19:27

Bruno Costa

2,7202 gold badges17 silver badges25 bronze badges

Collectives™ on Stack Overflow

Move image with javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related