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

【问题标题】：Change the image of a JSF commandbutton with DHTML event onmouseover使用 DHTML 事件 onmouseover 更改 JSF 命令按钮的图像
【发布时间】：2011-11-09 06:43:54
【问题描述】：

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

我在鼠标悬停时参加了 DHTML 活动，可以为我做到这一点，但怎么做？

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

我应该怎么做才能让它工作？

这是我当前的代码：

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

【问题讨论】：

尝试onmouseover="this.image='anotherimage.png'", onmouseover="this.src='anotherimage.png'"为<img src> 元素工作，所以也许这个工作相同。

标签： javascript html jsf jsf-2

【解决方案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"> 在技术上有着完全不同的目的。它代表一个图像映射，它允许您发送您在图像映射中单击的位置的鼠标坐标。您显然对此信息不感兴趣，因为您没有使用静态图像。

例如

<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 支持。

【讨论】：

这正是我所需要的。但我也认为，如果将来我需要做类似的事情，但可以说当鼠标悬停时显示一个面板，在这种情况下我需要java脚本对吗？感谢您的帮助。
如果用 HTML 做不到，看 CSS。如果用 CSS 做不了，看 JS。

【解决方案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 库如何生成标记。

【讨论】：

很好的答案，谢谢。但我意识到，对于这个，它可以在不需要 javascript 的情况下完成。感谢您的回答，我相信将来会有用。 +1