Question

我希望在鼠标移过它时更改按钮的图像。

我在onmouseover上骑过DHTML事件，可以为我做，但是怎么做？

我是否还需要为它创建一个javascript？

我该怎么做才能让它发挥作用？

这是我目前的代码：

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

Answer 1

<h:commandButton image="foo.png">生成HTML <input type="image" src="foo.png">。 onmouseover属性（与所有on*属性一样）应指向JavaScript函数。但是，您将图像路径放在那里。这只会导致JavaScript错误（如果您使用的是Firebug或WDT，则会注意到这一点。）

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

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

不要忘记添加onmouseout来更改图像。

对于具体问题，

无关，通常的做法是使用CSS背景图片。 HTML <input type="image">在技术上具有完全不同的目的。它表示一个图像映射，它允许您发送在图像映射中单击的位置的鼠标坐标。您显然对此信息不感兴趣，因为您没有使用静态图像。

E.g。

<h:commandButton value="" styleClass="mybutton" />

生成

<input type="submit" value="" class="mybutton" />

并添加此CSS（启动示例）

.mybutton {
    margin: 2px;
    padding: 0;
    border: 0;
    width: 100px;
    height: 20px;
    background-image: url('foo.png');
    cursor: pointer;
    overflow: visible;
}

.mybutton:hover {
    background-image: url('bar.png');
}

这不仅可以更好地重复使用/维护，而且还不需要JS支持。

Answer 2

是的，所有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库如何生成标记。

使用DHTML事件onmouseover更改JSF命令按钮的图像

2 个答案: