Textbox Background Swap

[ferdia]

Hi guys, simple one for you. I have two text boxes that I want to change the background image of, onFocus.

 

Here is the text boxes:

<td><input type="text" name="user" maxlength="30" value="" id="userbox"></td>
<td><input type="password" name="pass" maxlength="30" value="" id="passbox"></td>

 

And here is the CSS that adds the background images:

#userbox {
background-image:url('../images/username.png');
background-repeat:no-repeat;
}

#passbox {
background-image:url('../images/password.png');
background-repeat:no-repeat;
}

 

Any ideas on how I would switch the backgrounds to another image? Lets say blank.png?

 

Thanks in adance.

[jimmyt1988]

try this: 

<td>
     <input onfocus = "this.style.background = 'url(blank.png)'" onblur = "this.style.background = 'url(original.png)'" type="text" name="user" maxlength="30" value="" id="userbox">
</td>
<td>
     <input onfocus = "this.style.background = 'url(blank.png)'" onblur = "this.style.background = 'url(original.png)'" type="password" name="pass" maxlength="30" value="" id="passbox">
</td>

[ferdia]

That ALMOST worked thank you Jimmy, I'm getting an odd repeating problem with the onBlur, is there anyway to add a no-repeat attribute into the onBlur mix?

 

Ferdia

[jimmyt1988]

 

<td>

    <input onfocus = "this.style.background = 'url(blank.png) no-repeat'" onblur = "this.style.background = 'url(original.png) no-repeat'" type="text" name="user" maxlength="30" value="" id="userbox">

</td>

<td>

    <input onfocus = "this.style.background = 'url(blank.png) no-repeat'" onblur = "this.style.background = 'url(original.png) no-repeat'" type="password" name="pass" maxlength="30" value="" id="passbox">

</td>

[ferdia]

A gentleman and a scholar sir, thanks you very much.