如何在鼠标悬停和鼠标移出的情况下将图像添加到按钮？

Question

我有一个按钮，我想在该按钮上添加onmouseover和onmouseout效果。 我有两个onmouseover和onmouseout效果的图像 我试过这个

<p:commandButton onmouseover="../images/add_on_18.png" 
                 onmouseout="../images/add_off_18.png" 
                 value="New" />

你能帮助我吗？

的更新

我试过这个。没用 仍未获得正确的用户界面

XHtml代码：

 <p:commandButton value="New" 
                  styleClass = "btnBckg" 
                  actionListener="#{routeController.createNewRoute}" 
                  update=":routeHeaderForm"/>

CSS代码：

 .btnBckg {
        background-image: url('../images/add_off_18.png');
    }

    .btnBckg:hover {
        background-image: url('../images/add_on_18.png');
    }

Answer 1

<img src="../images/image1.png" 
     onmouseover="this.src='../images/image2.png'" 
     onmouseout="this.src='../images/image1.png'" />

希望这会有所帮助.. :)

Answer 2

嗯，......那CSS怎么样？将styleClass添加到p:commandButton并使用外部样式表中的CSS设置样式，如下所示：

Facelet代码：

  <p:commandButton value="New"
                     styleClass = "btnBckg" 
                     actionListener="#{routeController.createNewRoute}" 
                     update=":routeHeaderForm"/>

CSS代码：

    .btnBckg {
        background-image: url('../resources/images/image1.png');
    }

    .btnBckg:hover {
        background-image: url('../resources/images/image2.png');
    }

这就是你想要的吗？