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

[molily]

Ein schnelles ungetestetes Konzept mit jQuery.

und zwar habe ich einen Button Kontakt, der bei Überfahren mit der Maus das Formular öffnen soll.

$("buttonkontakt").mouseenter(function () {
   $("kontakt").show();
});
Mouseenter und mouseleave statt mouseover und mouseout, weil letztere aufsteigen (Bubbling) und somit unzählige irrelevante mouseover- und mouseout-Events passieren.

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.

Mit der Event-Eigenschaft relatedTarget kannst du abfragen, wohin sich der Mauszeiger beim Verlassen des Elements hinbewegt.

$("buttonkontakt").mouseleave(function (e) {
   var formularJ = $("kontakt");
   var formularE = formularJ.get(0);
   if (
      // Verlässt der Mauszeiger das Element in Richtung Formular?
      e.relatedTarget != formularE &&
      // Oder in Richtung eines seiner Kindelemente? (Ist #kontakt ein Elternelement vom Element, zu dem sich der Zeiger bewegt?)
      $(e.relatedTarget).parents().filter("#kontakt").length == 1) {

// Zeiger bewegt sich offenbar woanders hin. Verstecke Formular
      formularJ.hide()
   }
})

Anstatt
  $(e.relatedTarget).parents().filter("#kontakt").length == 1
könnte man auch schreiben
  !formularE.contains(e.relatedTarget)
Dann müsste man contains aber im Gecko nachrüsten

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.

Das wird schwieriger. Ich würde hier mit bubblenden DOMFocusIn- bzw. focusin-Event arbeiten.

function kontaktFormularFocus () {
   // Setze einen Flag beim Fokussieren eines Feldes
   $("kontakt").data("focussed", true);
}

function kontaktFormularBlur () {
   // Setze den Flag beim Verlassen des Feldes zurück
   $("kontakt").data("focussed", false);
}

// Überwache bubblende focus-Ereignisse
$("buttonkontakt :input")
   .bind("DOMFocusIn", kontaktFormularFocus)
   .bind("focusin", kontaktFormularFocus)
   .bind("DOMFocusOut", kontaktFormularBlur)
   .bind("focusout", kontaktFormularBlur)

// Ob jQuery das mitmacht, weiß ich nicht

// Frage den Flag beim Verlassen des Formulars ab
$("buttonkontakt").mouseleave(function () {
   if ($("kontakt").data("focussed")) {
      $("kontakt").hide();
   }
})

Ich weiss, das is ne Menge Holz aber evtl hat ja jemand ne Idee, wie man mir helfen könnte.

Eine Idee schon.
Aber wirklich umsetzen würde ich das nicht wollen. Ich halte das nicht für sonderlich bedienbar, und es robust hinzukriegen, wäre sehr, sehr schwierig.

Mathias

[Sven Rautenberg]

Moin!

Aber wirklich umsetzen würde ich das nicht wollen. Ich halte das nicht für sonderlich bedienbar, und es robust hinzukriegen, wäre sehr, sehr schwierig.

Da würde ich rein vom Gefühl her zustimmen. Mouseover-Effekte erwartet der Benutzer bei Menüpunkten. Und trotzdem wird er dort klicken wollen, und die Bedienbarkeit leidet sehr, wenn man gezwungen ist, sehr schmalen "Tunneln" zu folgen, damit das Menü nicht wieder verschwindet.

Zum Einblenden größerer Elemente, die dann auch noch effektiv bedient werden sollen, ist ein Hover-Effekt nach meiner Meinung vollkommen ungeeignet. Was spricht dagegen, den Button klickbar zu machen, und das Formular nur beim Klick anzuzeigen und bei erneutem Klick wieder auszublenden? Wenn der Button durch den Klick auch noch seine Optik verändert, oder alternativ bzw. zusätzlich ein erkennbares "Schließen-X" im Formularbereich erscheint, sollte die Bedienung eigentlich intuitiv gelingen können.

- Sven Rautenberg