fred example

<html>
<head>
<style type="text/css">
<!--
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	color: #000000;
}
body {
	background-color: #FFFFFF;
}
div.dv_norm {
	background-color: #FFFFFF;
	border: 1px solid #FFFFFF;
	padding: 4px;
	margin: 4px;
}
div.dv_tick {
	background-color: #AEFFAE;
	border: 1px solid #009900;
	padding: 4px;
	margin: 4px;
}
div.dv_cross {
	background-color: #FFB7B7;
	border: 1px solid #FF0000;
	padding: 4px;
	margin: 4px;
}
input.dv_inpt {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-stretch: normal;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-align: left;
	text-decoration: none;
	width: 150px;
	height: 19px;
	border: 1px solid #333333;
}
-->
</style>
<script type="text/javascript">
function setStyle1(x)
{
document.getElementById(x).style.background="#D2D2D2"
}
function setStyle2(x) {
	document.getElementById(x).style.background="#FFFFFF"
}

//----------------------------------------------

function CheckFname(x) {
  NkE=sublogit.fname1.value;
  NkR=sublogit.fname2.value;
  if (x=='1') {
    if (NkR=='') {
	  document.getElementById('chkfname1').className='dv_cross';
	  sublogit.imgfname1.src = "./img/aff_cross.gif"
  	}
  	else if (NkE==NkR) {
	  document.getElementById('chkfname1').className='dv_tick';
  	  document.getElementById('chkfname2').className='dv_tick';
	  sublogit.imgfname1.src = "./img/aff_tick.gif"
	  sublogit.imgfname2.src = "./img/aff_tick.gif"
	}
	else {
	  document.getElementById('chkfname1').className='dv_cross';
	  sublogit.imgfname1.src = "./img/aff_cross.gif"
	}
  }
  if (x=='2') {
  	if (NkE=='') {
	  document.getElementById('chkfname2').className='dv_cross';
	  sublogit.imgfname2.src = "./img/aff_cross.gif"
	}
	else if (NkE==NkR) {
	  document.getElementById('chkfname1').className='dv_tick';
	  document.getElementById('chkfname2').className='dv_tick';
	  sublogit.imgfname1.src = "./img/aff_tick.gif"
	  sublogit.imgfname2.src = "./img/aff_tick.gif"
	}
	else {
	  document.getElementById('chkfname2').className='dv_cross';
	  sublogit.imgfname2.src = "./img/aff_cross.gif"
	}
  }
}
//----------------------------------------------
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>

<form name="sublogit" id="sublogit">

<div class="dv_norm" id="chkfname1">
  <b>Enter Username:</b><br />
  <input class="dv_inpt" type="text" onfocus="setStyle1(this.id)" onblur="setStyle2(this.id); CheckFname('1');" name="fname1" id="fname1"> <img name="imgfname1" height="12" width="12" src="img/pixel.gif" alt="" />
</div>
<div class="dv_norm" id="chkfname2">
  <b>Repeat Username:</b><br />
  <input class="dv_inpt" type="text" onfocus="setStyle1(this.id)" onblur="setStyle2(this.id); CheckFname('2');" name="fname2" id="fname2"> <img name="imgfname2" height="12" width="12" src="img/pixel.gif" alt="" />
</div>

<br />
Last name: <input type="text" onfocus="setStyle1(this.id)" onblur="setStyle2(this.id)" on id="lname">
</form>
</body>
</html>