Hallo liebe Community,
vorab sei einmal gesagt, dass ich in puncto js absoluter Anfänger bin. Ich bekomme gerade so die einfachsten Sachen hin. Nun stehe ich vor einer - für mich - größeren Herausforderung, bei der ich etwas Hilfe bräuchte.
Nun zum Problem:
Ich arbeite an einer Webseite, welche auf mehreren php-Seiten unterschiedliche Formulare anbietet, in die Nutzer etwas eintragen können. Die Seiten sind praktisch immer gleich aufgebaut: Links gibt es eine Sidebar, die bei Bedarf Tooltips zu den einzelnen Inputs der Formulare ausgibt, rechts ist das Formular. Da ich css-Tooltips nicht so mag und die Sidebar im Zweifel dann leer wäre (was mein Design zerhaut), versuche ich nun das ganze über js zu lösen.
Das sollte dann so funktionieren, dass ich über ein Input mit der Maus fahre (bsp.: Input für Username) und links erscheint dann der Tooltip, wie gesagt. Beim mouseout verschwindet der wieder. Folgendes habe ich schon zustande gebracht:
In der Sidebar ein leeres p-Element (enthält später den Tooltip):
Im Formular die Inputs, wie dieses:
In der js-Datei diese beiden Funktionen:
Das funktioniert auch problemlos. Jetzt gehts aber los: Nun ist es keine kleine Webseite mit drei Formularen zu je 2 Tooltips, sodass man zur Not 6 verschiedene tooltipShow()-functions machen könnte, jeweils mit unterschiedlichem Text. Die komplette Webseite wird zur Laufzeit geschätzte 50 und mehr Inputs bekommen, für die fast immer auch ein Tooltip angezeigt werden soll. Die Funktion tooltipHide() ist ja überall gleich, die erste müsste jetzt aber dynamischer sein, sprich abhängig vom jeweils mit der Maus überfahrenen Input soll ein anderer Text ins p-Element der Sidebar.
Jetzt wäre die Frage, wie löse ich das? Über if-Anweisungen habe ich schon nachgedacht, aber wie gesagt, das sind dann bei 50 und mehr Tooltips auch unglaubliche Bäume von if-Abfragen und alles andere als elegant gelöst. Sicher ist die Lösung ganz einfach, aber wie gesagt - ich bin blutiger Anfänger und habe keine Ahnung, in welche Richtung ich da schauen muss. Mein einziger Vorteil ist, dass sich js und php von der Syntax her sehr ähneln, weshalb ich mich in die Anwendung bestimmter Funktionen etc. recht schnell einfinde, aus dem FF kann ich die aber natürlich (noch) nicht.
Wenn ihr mir da ein wenig auf die Sprünge helfen könntet, wäre ich sehr dankbar.
LG
EvilQueen
vorab sei einmal gesagt, dass ich in puncto js absoluter Anfänger bin. Ich bekomme gerade so die einfachsten Sachen hin. Nun stehe ich vor einer - für mich - größeren Herausforderung, bei der ich etwas Hilfe bräuchte.
Nun zum Problem:
Ich arbeite an einer Webseite, welche auf mehreren php-Seiten unterschiedliche Formulare anbietet, in die Nutzer etwas eintragen können. Die Seiten sind praktisch immer gleich aufgebaut: Links gibt es eine Sidebar, die bei Bedarf Tooltips zu den einzelnen Inputs der Formulare ausgibt, rechts ist das Formular. Da ich css-Tooltips nicht so mag und die Sidebar im Zweifel dann leer wäre (was mein Design zerhaut), versuche ich nun das ganze über js zu lösen.
Das sollte dann so funktionieren, dass ich über ein Input mit der Maus fahre (bsp.: Input für Username) und links erscheint dann der Tooltip, wie gesagt. Beim mouseout verschwindet der wieder. Folgendes habe ich schon zustande gebracht:
In der Sidebar ein leeres p-Element (enthält später den Tooltip):
HTML:
<p id="tooltip"></p>
Im Formular die Inputs, wie dieses:
HTML:
<input type="text" name="username" id="username" onmouseover="tooltipShow()" onmouseout="tooltipHide()">
In der js-Datei diese beiden Funktionen:
Code:
function tooltipShow() {
var tooltip = document.getElementById('tooltip');
tooltip.innerHTML = "TEST";
}
function tooltipHide() {
var tooltip = document.getElementById('tooltip');
tooltip.innerHTML = "";
}
Das funktioniert auch problemlos. Jetzt gehts aber los: Nun ist es keine kleine Webseite mit drei Formularen zu je 2 Tooltips, sodass man zur Not 6 verschiedene tooltipShow()-functions machen könnte, jeweils mit unterschiedlichem Text. Die komplette Webseite wird zur Laufzeit geschätzte 50 und mehr Inputs bekommen, für die fast immer auch ein Tooltip angezeigt werden soll. Die Funktion tooltipHide() ist ja überall gleich, die erste müsste jetzt aber dynamischer sein, sprich abhängig vom jeweils mit der Maus überfahrenen Input soll ein anderer Text ins p-Element der Sidebar.
Jetzt wäre die Frage, wie löse ich das? Über if-Anweisungen habe ich schon nachgedacht, aber wie gesagt, das sind dann bei 50 und mehr Tooltips auch unglaubliche Bäume von if-Abfragen und alles andere als elegant gelöst. Sicher ist die Lösung ganz einfach, aber wie gesagt - ich bin blutiger Anfänger und habe keine Ahnung, in welche Richtung ich da schauen muss. Mein einziger Vorteil ist, dass sich js und php von der Syntax her sehr ähneln, weshalb ich mich in die Anwendung bestimmter Funktionen etc. recht schnell einfinde, aus dem FF kann ich die aber natürlich (noch) nicht.
Wenn ihr mir da ein wenig auf die Sprünge helfen könntet, wäre ich sehr dankbar.
LG
EvilQueen