Infofeld in einem Formularelement
0 
Felix Riesterer
0
Infofeld in einem Formularelement
Hallo,
ich möchte ein Infofeld beim Mausüberflug über ein Feld anzeigen lassen. Dazu gibt es zwar schon einige Postings im Forum.
Das soll aber in einem Formularelement passieren, sprich eine <select> - Liste wo man zu jedem Eintrag ein Infofeld hat.
Ist so etwas möglich?
-
Liebe(r) flocki,
ich möchte ein Infofeld beim Mausüberflug über ein Feld anzeigen lassen.
[...]
Das soll aber in einem Formularelement passieren, sprich eine <select> - Liste wo man zu jedem Eintrag ein Infofeld hat.rein mit CSS kommst Du hier meines Wissens nicht weiter! Hier müsstest Du Javascript einsetzen.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Das hatte ich schon vermutet, gibt es irgendwo eine Anleitung dazu?
mfg
-
Liebe(r) flocki,
gibt es irgendwo eine Anleitung dazu?
Du wirst diese beiden Eventhandler benötigen:
* http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onmouseout@title=onmouseout
* http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onmouseover@title=onmouseoverLiebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Danke für die Links, ich mache jedoch so selten etwas mit javascript dass mir das nicht weiterhilft. Hilfreich wäre ein Beispiel mit einer <select>-Liste.
-
Liebe(r) flocki,
extra für Dich, weil mich die Aufgabenstellung gereizt hat:
<html> <head> <title>select-hover</title> <script type="text/javascript">// für optimale Kompatibilität mit anderen Javascripten schmeißen wir alles in ein Objekt optionHover = new Object(); // Die Meldungen legen wir in ein Unterobjekt "infos". Jede Meldung bekommt sozusagen einen Namen (z.B. "meineErsteInfoMeldung") optionHover.infos = new Object(); optionHover.infos.meineErsteInfoMeldung = "Achtung, das ist jetzt Javascript-Magie!"; optionHover.infos.meineZweiteMeldung = "Und wieder erscheint eine Meldung..."; optionHover.infos.test = "Test, test, test... Hört man mich?"; // Funktion zum Einblenden der Meldung optionHover.anzeigen = function (meldung) { var div = document.getElementById("optionHoverDiv"); if (div) { div.innerHTML = optionHover.infos[meldung]; // Meldungstext ins DIV schreiben div.style.display = "block"; // DIV sichtbar schalten } }; // Funktion zum Ausblenden der Meldung optionHover.verbergen = function () { var div = document.getElementById("optionHoverDiv"); if (div) { div.style.display = "none"; // DIV unsichtbar schalten } }; // Funktion zum Einrichten des DIVs wenn die Seite geladen hat optionHover.init = function () { var div = document.createElement("div"); // DIV-Element erzeugen div.id = "optionHoverDiv"; // ID geben div.style.display = "none"; // unsichtbar // Diverse CSS-Eigenschaften für die Darstellung... könnte man auch über echten CSS-Code in einer CSS-Datei steuern... div.style.position = "absolute"; div.style.top = "10px"; div.style.left = "10px"; div.style.border = "1px solid red"; div.style.background = "#ffffff"; div.style.padding = "20px"; div.style.width = "200px"; // DIV in das Dokument am Ende einfügen document.body.appendChild(div); }; optionHover.oldWinOnLoad = window.onload; // alten Wert für onload speichern (damit andere Scripte nicht blockiert werden) // optionHover.init() beim Laden der Seite ausführen lassen window.onload = function () { if (typeof(optionHover.oldWinOnLoad) == "function") optionHover.oldWinOnLoad(); optionHover.init(); };</script> </head> <body> <h1>Test-Formular</h1> <p>Demo für einen Hover-Effekt in Javascript für <option>s eines <select>-Felder...</p> <form action="#" method="get"> <p>Auswahl: <select name="auswahl"> <option value="Wert1" onmouseover="optionHover.anzeigen('meineErsteInfoMeldung')" onmouseout="optionHover.verbergen()">Wert eins</option> <option value="Wert2" onmouseover="optionHover.anzeigen('meineZweiteMeldung')" onmouseout="optionHover.verbergen()">Wert zwei</option> <option value="Wert3" onmouseover="optionHover.anzeigen('test')" onmouseout="optionHover.verbergen()">Wert drei</option> </select></p> </form> </body> </html>Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
ich danke Dir :)
-
-
-
-
-