Menu
Sooooo close!!!
omousover, onmouseout, and onfocus all work but not onblur and I can’t figure out why. Anyone???
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title></title>
<style type=”text/css”>
input {
margin:1px;
border:0;
background:#CCC;
color:#000;
}
input:hover, .inputover {
margin:0;
border:1px solid #000;
}
</style>
<script type=”text/javascript”>
function setClass()
{
var theInputs = document.getElementsByTagName(‘input’);
for (var i = 0, thisInput; thisInput = theInputs[i]; i++)
{
if (thisInput.type == ‘text’)
{
thisInput.onmouseover = function()
{
this.className += (this.className) ? ‘ inputover’ : ‘inputover’
}
thisInput.onmouseout = function()
{
this.className = (this.className == ‘inputover’) ? ” : this.className.replace(‘ inputover’, ”)
}
{
thisInput.onfocus = function()
{
this.className += (this.className) ? ‘ inputfocus’ : ‘inputfocus’
}
thisInput.onblur = function()
{
this.className = (this.className == ‘inputfocus’) ? ” : this.className.replace(‘ inputfocus’, ”)
}
}
}
}
}
onload = setClass;
</script>
</head>
<body>
<input type=”text”>
<input type=”text”>
<input type=”text”>
<input type=”submit”>
</body>
</html>