使用DHTML事件onmouseover更改JSF命令按鈕的圖像

Question

我想在鼠標移過它時更改按鈕的圖像。

我騎着DHTML事件onmouseover，可以為我做，但是怎么樣？

我還需要為它創建一個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">在技​​術上具有完全不同的目的。 它表示一個圖像映射，它允許您發送在圖像映射中單擊的位置的鼠標坐標。 由於您沒有使用靜態圖像，因此您顯然對此信息不感興趣。

例如

<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庫如何生成標記。