html Javascript 通过 <a> 按钮上的 onmouseover 移动图像答案

【问题标题】：html Javascript move image by onmouseover on <a> buttonhtml Javascript 通过 <a> 按钮上的 onmouseover 移动图像
【发布时间】：2014-06-28 22:10:46
【问题描述】：

我是一个愚蠢的网站创建者，我遇到了一些关于 javascript 的问题。我在互联网上找到了一个功能，现在我将它与更多东西结合起来。但它根本不起作用。我对javascript没有太多经验。

Javascript 文件：

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;}

谢谢。

【问题讨论】：

标签： javascript html element move getelementbyid

【解决方案1】：

您可以简化和改进您的代码。你只能留下这一项功能：

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

并像这样在 HTML 中使用它：

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

演示：http://jsfiddle.net/efu8n/

你错了：你应该使用id属性，而不是ElementId。如果您像这样调用它们，函数内部的上下文也将是 Window，而不是您与之交互的目标元素。因此，您可以简单地传递引用对象 this 以用于检索 id。

【讨论】：