聯繫表格字段點擊時的圖片更改

Question

我目前在我的網站上有一個聯繫表單，單擊時突出顯示橙色邊框。

在這些字段中有灰色的圖標（請參閱此處查看打印屏幕：http://i47.tinypic.com/2d6mvwp.jpg），我試圖獲取它，以便單擊字段時圖像會從灰色變爲橙色版本。所以基本上，字段圖標和邊框會同時突出顯示，具體取決於所點擊的是哪一個。

我希望這是死的簡單的人，我認爲最主要的IM掙扎的是，圖像通過CSS引用

形式的HTML部分是在這裏：

<form method="post" action="contactengine.php"> 

      <label for="Name"></label> 
      <input type="text" placeholder="Name" name="Name" id="Name" 


      <label for="Email"></label> 
      <input type="text" placeholder="E-mail" name="Email" id="Email" /> 

      <label for="Message"></label><br /> 
      <textarea name="Message" placeholder="Enter your message here..." rows="20" cols="20"></textarea> 

      <input type="image" name="submit" value="" src="Button_Static.png" onmouseover="this.src='Button_Hover.png'" onmouseout="this.src='Button_Static.png'" class="submit-button"/> 

     </form> 

和背後的名字和電子郵件領域的CSS是在這裏（道歉的代碼塊沒有使我能夠正確地插入此）：

#Name{ 
    background-image: url(NameIcon.png); 
    background-repeat: no-repeat; 
    background-size:32px 24px; 
    background-position-x: 10px; 
    background-position-y: 40%; 
    padding: 5px; 
    height: 30px; 
    width: 350px; 
    font-family: Helvetica, sans-serif; 
    font-size: .8em; 
    margin: 0px 0px 10px 0px; 
    border: 2pt solid #ccc; 
    text-indent: 50px; 

    /* Curved Boxes - Browser Compatability */ 

    -moz-border-top-left-radius: 8px; 
    border-top-left-radius: 8px; 
    -moz-border-top-right-radius: 8px; 
    border-top-right-radius: 8px; 
    -moz-border-bottom-left-radius: 8px; 
    border-bottom-left-radius: 8px; 
    -moz-border-bottom-right-radius: 8px; 
    border-bottom-right-radius: 8px; 
} 

#Email { 
    background-image: url(EmailIcon.png); 
    background-repeat: no-repeat; 
    background-size:30px 17px; 
    background-position-x: 12px; 
    background-position-y: 40%; 
    padding: 5px; 
    height: 30px; 
    width: 350px; 
    font-family: Helvetica, sans-serif; 
    font-size: .8em; 
    margin: 0px 0px 10px 0px; 
    border: 2pt solid #ccc; 
    text-indent: 50px; 

    /*Curved text Boxes - Browser Compatability*/ 

    -moz-border-top-left-radius: 8px; 
    border-top-left-radius: 8px; 
    -moz-border-top-right-radius: 8px; 
    border-top-right-radius: 8px; 
    -moz-border-bottom-left-radius: 8px; 
    border-bottom-left-radius: 8px; 
    -moz-border-bottom-right-radius: 8px; 
    border-bottom-right-radius: 8px; 
} 

Answer 1

做一套CSS樣式和使用：焦點將應用於具有焦點的輸入元素。只要改變圖像和邊界在那裏的橙色的：

#Name:focus{ 
    background-image: url(OrangeIcon.png); 
    border: 1px solid orange 
} 

Answer 2

你會怎麼做是有其更新的背景圖像屬性

document.getElementById("email").style.backgroundImage = "url(EmailIconSelected.png)";