jQuery replacement of Prototype method

Question

Hi Techies,

I have the following script which will change the background image of a text box on focus and retain the previous image ob blur, if the content is emapty.The images are something like watermarks.This is making use of prototype javascript library.

  <div class="searchfield">
                <asp:TextBox ID="txtStoreId" runat="server" class="username searchbg"></asp:TextBox>

                <script type="text/javascript">
//<![CDATA[
var storeidLabel = new FormLabel('txtStoreId', {image:'../lib/images/store_id.gif', emptyImage:'../lib/images/bg_userpw_notext.gif'});
//]]>
</script>

  </div>

Now i want to have the jQuery replacement of this.I am already using jQuery in my page.I want to take the prototype away from my page.

Answer 1

You could manipulate the background-image css property of the element on the focus and blur events:

$(document).ready(function(){
    var image = '../lib/images/store_id.gif';
    var emptyImage = '../lib/images/bg_userpw_notext.gif';

    $('#inputId').focus(function(){
      $(this).css('background-image', 'url('+image+')');
    });

    $('#inputId').blur(function(){
      if ($(this).val().length === 0){
        $(this).css('background-image', 'url('+emptyImage+')');
      }
    });
});