Label Over

<style>
<!--
	body {
		margin:0;padding:0;font:normal 1.0em "Trebuchet MS"
	}
	#container {
		width:500px;margin:0 auto;
	}
	fieldset {
		border:1px solid #c96;padding:1.0em;margin:1.0em;
	}
	legend {
		color:#ccc;font-size:120%;
	}
	input, textarea {
		display:block;clear:left;
		font:normal 1.0em "Trebuchet MS";
		margin:10px;padding:7px;
		border:1px solid #999;
	}
	#f div.label {
		position:relative;float:left;
		margin-right:3px;clear:left;
	}
	.clear {
		clear:both;
	}
	label.over {
		color:#ccc;position:absolute;
		top:16px;left:20px;
	}
-->
</style>
 
 
 
<script src="_js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="_js/label_over.js" type="text/javascript"></script>
<script type="text/javascript">
 <!--
	$(function() {
	  $('#f').submit(function() {
		 $('legend', this).html('Example with labelOver');
		 $('label').labelOver('over');
		 return false;
	  })
	  $('label.pre').labelOver('over');
	})
 //-->
</script>
 
 
 
<div id="container">
   <form action="" id="f">
      <fieldset>
         <legend>Example without labelOver</legend>
         <div class="label">
            <label class="pre" for="applied">Applied</label>
            <input type="text" name="applied" value="" id="applied" />
         </div>
         <div class="label">
            <label class="pre" for="one">One</label>
            <input type="text" name="one" value="" id="one" />
         </div>
         <div class="label">
            <label class="pre" for="two">Two</label>
            <input type="text" name="two" value="" id="two" />
         </div>
         <div class="label">
            <label for="search">Search</label>
            <input type="text" name="search" value="" id="search" />
         </div>
         <div>
            <input type="submit" name="submit" value="Apply label over" id="submit" />
         </div>
         <div class="clear"></div>
      </fieldset>
   </form>
</div>