Kontaktformular soll durch Hovern über Button öffnen

[sion]

So...das ist mein erster Eintrag hier und ich hoff, ich find hier eine Lösung auf mein Problem.

und zwar habe ich einen Button Kontakt, der bei Überfahren mit der Maus das Formular öffnen soll. Wenn ich den Button wieder verlasse, so soll sich das Formular wieder schliessen, es sei denn, ich fahre von dem Button aus auf das Formular. Sollte ich dann das Formular mit der Maus verlassen, soll es sich ebenfalls schliessen. Und zu guter letzt soll das Formular offenbleiben, wenn ein Eingabefeld den Folkus hat.

Ich weiss, das is ne Menge Holz aber evtl hat ja jemand ne Idee, wie man mir helfen könnte. Anbei mal ein bisschen Code:

  
HTML-Code:  
<li>  
		<!--[if IE]><a id="buttonkontakt" href="kontakt.html"><table><tr><td><![endif]-->  
		<dl class="three">  
			<dt><a title="Nehmen sie mit uns Kontakt auf." onmouseover="javascript:formShow('kontakt')" href="#nogo" id="buttonkontakt"></a></dt>  
		</dl>  
		<!--[if IE]></td></tr></table></a><![endif]-->  
	</li>

  
HTML-Code Teil 2:  
<div id="kontakt" class="schatten">  
	<form action="kontakt.php" method="POST">  
		<img src="images/t_nachricht.PNG" alt="Ihre Nachricht an uns:" class="nachricht">  
		<input type="button" class="schliessen" value="" onClick="javascript:formHide('kontakt')">  
		<dl>  
			<dt>  
				<label for="kontakt_name">Name:</label>  
			</dt>  
			<dd>  
				<input type="text" name="name" id="kontakt_name">  
			</dd>  
			<dt>  
				<label for="kontakt_email">E-Mail:</label>  
			</dt>  
			<dd>  
				<input type="text" name="email" id="kontakt_email">  
			</dd>  
		</dl>  
		  
		<textarea name="text"></textarea>  
		<input type="submit" class="senden" value="">  
		<input type="reset" class="zuruecksetzen" value="">  
	</form>  
</div>

  
CSS:  
  
/*  BEGINN index.html  */  
  
div.schatten {  
	margin:0;  
	padding: 0 10px 10px 0;  
	background-image: url(images/schatten.gif);  
	background-repeat: no-repeat;  
	background-position: right bottom;  
}  
  
div.schatten form {  
	margin: 0;  
	padding: 1px;  
	background-image: url(images/blase-gesamt.gif);  
	background-repeat:no-repeat;  
}  
  
div#kontakt input, div#download input {  
	width: 80px;  
	height: 15px;  
	border-style: none;  
	background-color: rgb(233,233,233);  
}  
  
div#kontakt input.schliessen, div#download input.schliessen {  
	margin: 15px 20px 0 0;  
	float: right;  
	background-image: url(images/b_schliessen.PNG);  
}  
  
div#kontakt input.senden, div#download input.senden {  
	float: left;  
	background-image: url(images/b_senden.PNG);  
	margin-left: 16px;  
	margin-top:5px;  
}  
  
div#kontakt input.zuruecksetzen, div#download input.zuruecksetzen {  
	float: left;  
	background-image: url(images/b_loeschen.PNG);  
	margin: 5px 20px;  
}  
  
/* Kontakt */  
  
div#kontakt form {  
	font-family: Arial, Helvetica, sans-serif;  
	color: rgb(135, 133, 132);  
	font-weight: bold;  
	font-size: 9pt;  
	width: 440px;  
	height: 300px;  
}  
  
div#kontakt img.nachricht {  
	margin: 15px 0 0 20px;  
	float: left;  
}  
  
div#kontakt dl {  
	margin: 0;  
	padding: 0 0 5px 0;  
	clear: both;  
}  
  
div#kontakt dl dt {  
	display: inline;  
	margin: 5px 5px 0px 9px;  
	padding: 0;  
	width: 100px;  
	height: 30px;	  
	float: left;  
	width: 68px;  
}  
  
div#kontakt dl dd {  
	display: inline;  
	margin: 5px 15px 0px 0;  
	padding: 0;  
	width: 100px;  
	height: 30px;  
	float: left;  
	width: 120px;  
}  
  
div#kontakt dl dd input {  
	width: 120px;  
}  
  
div#kontakt textarea {  
	border-style: none;  
	width: 400px;  
	height: 205px;  
	background-color: rgb(233,233,233);  
}  
  
div#kontakt {  
	position: absolute;  
	left: 590px;  
	z-index: 99;  
	visibility: hidden;  
}

Ich hab noch nicht viel Ahnung von Javascript aber mit den onmouseover und onclick komm ich irgendwie nicht weiter...naja...vielleicht erbarmt sich jemand.

Vielen, vielen Dank im Vorraus

Sion