Javascript 使用DHTML事件onmouseover更改JSF commandbutton的映像

我想在鼠标经过按钮时更改按钮的图像

我在Mouseover上参加了DHTML活动，可以为我这样做，但是怎么做呢

我是否也需要为它创建javascript

我该怎么做才能让它工作

这是我当前的代码：

<h:commandButton class="btn" image="/resources/images/mainbtn1.png" onmouseover="/resources/images/mainbtn2.png"/">

该
生成HTML
。
onmouseover
属性（与*

属性上的所有

on一样）应该指向JavaScript函数。但是，您将图像路径放在那里。这只会导致JavaScript错误（如果您使用的是Firebug或WDT，您会注意到这一点）

您需要编写一些JS来相应地更改图像按钮的
src
属性：

onmouseover="this.src='/resources/images/mainbtn2.png'"

不要忘记添加一个
onmouseout
，它会将图像更改回原来的状态


与具体问题无关，通常的做法是使用CSS背景图像。HTML
在技术上具有完全不同的用途。它表示一个图像地图，允许您发送图像地图中单击位置的鼠标坐标。您显然对这些信息不感兴趣，因为您没有使用静态图像

例如



产生



并添加此CSS（启动示例）

.mybutton{
保证金：2倍；
填充：0；
边界：0；
宽度：100px；
高度：20px；
背景图片：url（'foo.png'）；
光标：指针；
溢出：可见；
}
.mybutton:悬停{
背景图片：url（'bar.png'）；
}

这不仅具有更好的可重用性/可维护性，而且不需要JS支持。
是的，所有的
onXXX
属性都用于JavaScript事件处理程序。您需要为此编写一个JavaScript函数。大概是这样的：

function changeImage() {
    this.style.backgroundImage = "url('path/to/image.png')";
}

并使用以下命令调用：

<h:commandButton class="btn" image="/resources/images/mainbtn1.png" onmouseover="changeImage()" />



注意：我不能提供确切的JavaScript，因为它完全取决于您使用的JSF库如何生成标记。
试试
onmouseover=“this.image='anotherimage.png'”
，
onmouseover=“this.src='anotherimage.png''
适用于
元素，所以这个可能也适用。这正是我所需要的。但我也认为，有时候，如果将来有机会，我需要做一些类似的事情，但让我们假设在鼠标结束时显示一个面板，在这种情况下，我需要java脚本，对吗？谢谢你的帮助。如果不能用HTML完成，请看CSS。如果不能用CSS完成，请看JS。很好的答案，谢谢。但我意识到，对于这一个，它可以在不需要javascript的情况下完成。谢谢你的回答，我相信将来会有用的+1.