if statement - json with hide and else if -

i building registration form. #onimg och #offimg 2 divs img. if fill in available user name #offimg show, , if choose allready taken username #onimg vill show.

if not write @ in registration field (like if delete text) want images hide. dont=(.

here html

<ul>     <li>username:</li>     <li>password:</li> </ul>  <ul>      <li><input type="text" id="user" name="user" value="" /></li>     <li><input type="text" id="pass" name="pass" value="" /></li>     <li><input type="checkbox" name="show" value="password">show password</li> </ul>  <div id="onimg"></div> <div id="offimg"></div>   </fieldset>  <button type="button" id="reg" value="" >register</button> 

some css

#onimg {   z-index:1000;   position:absolute;   left:300px;   top:23px;   background-image:url('notavailable.png');   width:20px;   height:20px; }  #offimg {   z-index:1000;   position:absolute;   left:300px;   top:23px;   background-image:url('available.png');   width:20px;   height:20px; } 

and here jquery

$('#user').focusout(function(){    var users = $('#user').val();    $.getjson( "available.php" ,      //the url perform lookup      {name: users }, //the data send      function (result){     //the function fire upon return          if (!result) {       //result json formatted              $('#onimg').fadein('fast');          } else  {              $('#offimg').fadein('fast');          }                                                });  });  $(function() {     $('#user').blur(function() {         if($(this).val() == '') {             $("#onimge").hide();             $("#onimge").hide();         }     }); }); 

$(function() {     $('#user').blur(function() {         if($(this).val() == '') {             $("#onimge").hide(); // misspelled #onimg             $("#onimge").hide(); // 1 should #offimg, not repeat of #onimg         }     }); }); 

btw, can both images in 1 call:

$("#onimg, #offimg").hide(); 

you should put $("#user").focusout() handler inside document ready function.