在鼠標懸停的情況下使用DHTML事件更改JSF命令按鈕的圖像

我想在鼠標移過按鈕時更改按鈕的圖像。在鼠標懸停的情況下使用DHTML事件更改JSF命令按鈕的圖像

我騎的DHMML事件onmouseover，可以爲我做，但如何？

我還需要爲它創建一個JavaScript嗎？

我該怎麼做才能使它工作？

這是我當前的代碼：

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

來源

2011-09-02 sfrj

嘗試'onmouseover =「this.image ='anotherimage.png'」'，'onmouseover =「this.src ='anotherimage.png'」'適用於''元素，所以也許這個作品是一樣的。 – user219882

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

來源

2011-09-02 15:24:13 BalusC

這正是我需要的。但是，我想在有些時候，如果將來我需要做類似的事情，但是可以說鼠標結束時顯示一個面板，那樣的話，我將需要Java腳本嗎？感謝幫助。 – sfrj

如果無法用HTML完成，請查看CSS。如果不能用CSS完成，請看JS。 – BalusC

好吧，我會記住這一點 – sfrj

是的，所有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庫生成你」重新使用。

來源

2011-09-02 15:24:21 adarshr

偉大的答案，謝謝。但是我意識到對於這個可以不需要javascript就可以完成。感謝您的回答，我確信將來會有用。 +1 – sfrj

在鼠標懸停的情況下使用DHTML事件更改JSF命令按鈕的圖像

回答

相關問題