html Javascript move image by onmouseover on <a> button

Question

I'm a stupid website creator, and I've got some problems with a javascript. I found a function on the internet and now i'm combining it with some more things. But it doesn't work at all. I dont have much experience with javascript.

Javascript file:

function getOff(){z = this.ElementId;
 x = document.getElementById('button_shadow' + z);
 return x.offsetLeft;}

function move_right(value){var y = getOff();
 x.style.left = y + value;}

html:

<img src="img/button_shadow.png" class="button_shadow" style="top: 218px; left: 5px;" id="button_shadow1">
<img src="img/button_shadow.png" class="button_shadow" style="top: 259px; left: 5px;" id="button_shadow2">

<script src="js/button_shadow_move.js"></script>
<a class="tlacitko_bok" style="top: 0px;" href="o_klubu.html" id="1" onmouseover="getOff(); move_right(5);">O klubu</a>
<a class="tlacitko_bok" style="top: 41px;" href="fotogalerie.html" id="2" onmouseover="getOff(); move_right(5);">Fotogalerie</a>

css:

a.tlacitko_bok:hover{margin-left: 5px;}

Thank you.

Answer 1

You can simplify and improve your code. You can only leave this one function:

function move_right(obj, value) {
    var x = document.getElementById('button_shadow' + obj.id);
    x.style.left = x.offsetLeft + value + 'px';
}

and use it in HTML like this:

<a id="1" onmouseover="move_right(this, 5);" ...>O klubu</a>

Demo: http://jsfiddle.net/efu8n/

You mistakes: you should use id property, not ElementId. Also context inside your function if you invoke them like this is going to be Window, not the target element you interact with. So you can simply pass reference object this to use for retrieving id.