Mouseover über Suchleiste öffnet erweiterte Suche

[jb_alvarado]

Hallo Allerseits,

Habe meine Suchleiste für phpbb3 etwas umgestaltet. Das schaut jetzt so aus, dass nur noch das Suchfeld zu sehen ist, mit dem Button Suche rechts.

Wenn man nun mit der Maus über das Suchfeld geht, erscheint drunter ein kleines Feld in dem man die erweiterte Suche starten kann.
[ externes Bild ]

Momentan öffnet sich das Fenster für 3,5 Sekunden und schließt sich dann wieder, egal wo man mit der Maus gerade ist. Das möchte ich soweit erweitern, dass das Fenster offen bleibt, wenn ich auf den Feld erweiterte Suche bin, und sofort verschwindet, wenn ich das Feld verlasse. Wenn ich einfach wieder ein Mousouver- Befehl auf dem Feld anwendet, wird dieser nicht berücksichtigt, sondern das Feld schließt sich weiterhin nach 3,5 Sekunden.
Mein Code:

Neuer Eintrag in common.css:

Code: Alles auswählen

#extsearch {
	position:absolute;
	margin-left:711px;
	margin-top:25px;
	padding:5px;
	background:#c7c7c7;
	width:104px;
	white-space: nowrap; /* For Opera */
	z-index:100;
	visibility:hidden;
	border:1px solid #000000;
}

Funktion in overall_header.html:

Code: Alles auswählen

	function search_out(){
	document.getElementById('extsearch').style.visibility="hidden";
	}
	
	function ausblenden(){
	setTimeout("search_out()", 3500);
	}

Suchfeld in overall_header.html:

Code: Alles auswählen

<div id="extsearch"> 
				<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a>
				</div>


			<div class="inner"><span class="corners-top"><span></span></span>
			
		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
		
			<div id="search-box">
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onmouseover="javascript:document.getElementById('extsearch').style.visibility='visible';" onmouseout="ausblenden()" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
				
				{S_SEARCH_HIDDEN_FIELDS}  // Hier bin ich mir nicht sicher ob das richtig ist, zuvor hing die Zeile hinter  L_SEARCH_ADV}</a>
				
				</fieldset>
				</form>
			</div>

		<!-- ENDIF -->		

Freue mich über Anregungen und Tipps! Einen Link zum Testforum kann ich leider nur per PM weitergeben.


Edit: Mir ist gerade noch ein kleiner Fehler aufgefallen und zwar wird das Feld "erweiterte Suche" im Internet Explorer leicht versetzt dargestellt. So etwas 5 Pixel nach rechts. Woran kann das liegen?

Edit2: Problem mit dem IE gelöst:
Browserweiche in overall_header.html:

Code: Alles auswählen

<!--[if lte IE 7]>
 <link rel="Stylesheet" href="{T_THEME_PATH}/IE.css" type="text/css" />
<![endif]-->

</head>

Neues css:

Code: Alles auswählen

/* IE Bedingung
-----------------------------------*/

#extsearch {
	margin-left:701px;
}

[Licet]

müsste so funktionieren:

Code: Alles auswählen

onmouseout="javascript:document.getElementById('extsearch').style.visibility="hidden";

[jb_alvarado]

hi Licet,
danke hat funktioniert. Habe jetzt auch die Funktion raus genommen, ging auch ohne.