當使用輸入類型「圖像」時，我試圖使它在我將鼠標移到它上面時更改爲另一張圖片

Question

<form action='./index.php' method='post' class='form'> 
<table> 
<tr> 
<td>$error</td> 
</tr> 
<tr> 
<td>Username:</td> 
<td><input type='text' name='user' /></td> 
</tr> 
<tr> 
<td>Password:</td> 
<td><input type='password' name='password' /></td> 
</tr> 
<tr> 
<td></td> 
<td><input type='image' src='./images/loginbtn.jpg' name='loginbtn' value='Login' alt='Submit Form'/></td> 
</tr> 
</table> 
</form> 

上面的代碼是我的（正在進行的）網站的代碼。我使用「圖像」輸入類型，因爲它允許我使用圖像作爲按鈕。我在這裏遇到麻煩的事情是，當我將鼠標放在它上面時，會插入一些代碼，讓我可以放入另一張圖片。此代碼封裝在PHP標記中，並設置爲變量「$ form」。這樣我就可以將它回顯出來，並輕鬆地運行其他一些PHP代碼。

當我將鼠標放在按鈕上時，是否有任何CSS可用於放置另一張圖片？我可能會把這看起來更復雜嗎？

Answer 1

對於本地JavaScript可以使用onmouseover按照本例：

http://jsfiddle.net/42E99/

道歉長圖像的URL，希望這不會混淆。

編輯

CSS：http://jsfiddle.net/dZ2qL/使用hover更改背景圖片。

第二編輯

http://jsfiddle.net/dZ2qL/3/

使用<div>代替<input>，也增加了一些線路的CSS。

background-color:transparent; 
border: 0px solid; 

Answer 2

看看這個>>fiddle<<
下面是一個簡短的jQuery代碼演示：

首先，你需要包括jQuery的

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

那麼你有這段代碼：

<script> 
    $(document).ready(function() { 
     $("#test").hover(
      function() { 
      $(this).attr('src','http://www.seobook.com/images/smallfish.jpg'); 
      }, 
      function() { 
      $(this).attr('src','http://www.google.com/images/srpr/logo4w.png'); 
      } 
     ); 
    }); 
</script> 

並且在你的html中，你設置了id或class給你的元素（它必須與示例腳本中的相同，在我的示例中，值爲test。

<input id="test" type='image' src='http://www.google.com/images/srpr/logo4w.png' name='loginbtn' value='Login' alt='Submit Form'/>