[GELÖST] onmouseover in Funktion einbauen

[Leonic]

Servus miteinander

Vorab: ich bin was Javascript angeht ein totaler Neuling! Ich habe versucht mithilfe der Suchmaschine meines Vertrauens eine Lösung zu finden, aber leider ohne Erfolg. Falls die Frage in ähnlicher Form schon des Öfteren beantwortet wurde habe ich wohl mit den falschen Keywords gesucht.

Zu der Frage: ich möchte, dass beim überfahren (onmouseover) eines Elements ein Content eingeblendet wird. Das habe ich mit folgendem Code geschafft: *HIER KLICKEN*

Nun möchte ich eine Funktion schreiben, der die Parameter "button" und "content" übergeben werden und beim überfahren des Buttons (onmouseover) der Content eingeblendet wird. Das habe ich auch gleich mal versucht, leider ohne Erfolg. *HIER KLICKEN*

Hat jemand von euch eine Idee wie die Funktion richtig aufgebaut werden muss ?

Vielen Dank im Voraus und liebe Grüße

Leon

 

[mikdoe]

kann ich mit touchdevice nicht testen und helfen.
ich empfehle immer, für die nutzung notwendigen funktionen nicht auf mouseover zu legen.

 

[Leonic]

Erstmal danke für die schnelle Antwort !
Wozu würdest du mir stattdessen raten ? Ich möchte die Funktion z.B für kleinere Felder über dem Kopfbereich der Seite nutzen, um mehr Informationen zum Versand, der kostenlosen Retoure oder ähnlichem nutzen. Angedacht war, dass beim Überfahren des Schriftzuges "Kostenloser Versand ab 50€ ein kleines Fenster eingeblendet wird, in dem weitere Informationen zu den Versandbedingungen aufgeführt sind. Beim Verlassen des Schriftzuges oder der kleinen Box soll die Box wieder ausgeblendet werden, das Ausblenden habe ich aus den Beispielen übersichtshalber rausgelassen.

Soll die Funktion eventuell um ein "onclick" erweitert werden, damit auch touch-Geräte die Box sichtbar machen können ?

Liebe Grüße

Leon

 

[mikdoe]

ja das scheint eine wesentliche info sein. ich würde sogar überlegen, dass ganz ohne js zu machen, weil das sonst die js-ausschalter ausschließt. und bei einem shop würde ich niemanden wissentlich ausschließen. hast du ein platzproblem an der stelle oder wo genau liegt der hund begraben?

 

[jspit]

Ich würde dies auch ncht mit Javascript machen, CSS wäre eine Option. Hier ein Bespiel, was schon etwas älter ist:

CSS Tooltipp Demo.

Dazu gibt es etliche Tutorials im Netz.
Für meine Zwecke reicht jedoch oft das HTML title Attribute.

 

[mikdoe]

CSS Tooltipp Demo

Sehr cool, danke dir! Ich glaub, das kann ich auch gebrauchen.

 

[jspit]

Den Tooltipp-Text fest im CSS zu verankern und nicht im HTML ist oft lästig. Besser ist im CSS sowas zu notieren:

content: attr(data-tooltip);

Auch dazu gibt es zahlreiche Beiträge: z.B. CSS3: Individuelle Tooltips ohne JavaScript


LG jspit

 

[Leonic]

Servus miteinander

Erstmal danke für die Tipps !
Ich habe mir die Links gerade mal angeschaut und nutze bereits ähnliche Techniken für kleine Begriffserklärungen.
Beim überfahren der Boxen im Kopfbereich sollen aber mehrere HTML-Klassen geändert werden. So soll z.B. der Body mit der Klasse versehen werden, die das Scrollen beim Rest der Seite unmöglich macht (overflow: hidden. Des weiteren soll ein div eingeblendet werden, dass den Rest der Seite etwas abdunkelt, um den Fokus auf die Box zu verstärken. Das alles möchte ich mit einer Funktion realisieren, der die Parameter "button" und "content" übergeben werden, wie oben in den Beispiel näher beschrieben. Habt ihr da vielleicht eine Idee bzw. könnt ihr mir sagen was an meiner Funktion falsch ist ?

Liebe Grüße

Leon

 

[kkapsner]

Dein Ansatz oben ist falsch, da ja die Funktion gleich ausgeführt wird und dem onmouseover auch nichts zugewiesen wird. Du musst in dieser Funktion eine andere Funktion zurückgeben, die dann das gewünschte tut: https://jsfiddle.net/2npro47p/1/

 

[Leonic]

Vielen Dank, so funktioniert es
Jetzt versuche ich gerade Abfragen in die Funktion einzubauen, was aber nicht wie gewünscht funktioniert. *HIER KLICKEN*
Ich habe bewusst auf "onclick" und nicht auf "onmouseover" und "onmouseout" gesetzt, damit auch die oben von mikdoe erwähnten Tabletnutzer die Box ein- und ausblenden können. Kann mir jemand sagen wo da der Fehler ist ? Gute Tutorials zu dem Thema sind auch herzlich willkommen

Liebe Grüße

Leon

 

[kkapsner]

Die Abfragen müssen natürlich in die innere Funktion und nicht in die äußere.

 

[Leonic]

Jetzt funktioniert alles wie gewünscht. Habe es auch geschafft die Funktion mit anderen Elementen (wie oben beschrieben) zu erweitern. Also vielen Dank nochmal !

Liebe Grüße
Leon

 

[kkapsner]

Also vielen Dank nochmal

Bitte - gern geschehen.