CSS-Mouseover

von **hape13** » 01.03.2010, 13:25

Hallo zusammen!

Ich bin nicht so sicher, ob ich hier richtig bin, einmal vom Thema, darüber hinaus vom Schwierigkeitsgrad "Anfänger oder Fortgeschrittene". Ich muss vorwegschicken, dass ich 100%-iger Laie bin, was die Erstellung von Webseiten betrifft. Ich habe gegen Ende Oktober begonnen, mir mit dem - sehr wahrscheinlich hier nur belächelten - iWeb von Apple eine eigene Homepage zu basteln. Wenn man die recht einfachen Möglichkeiten von iWeb nutzt, ist das alles auch recht unproblematisch. Wie es dann aber so ist, möchte man vielleicht ein wenig mehr und so habe ich mich in unzähligen Foren usw. ein wenig schlauer gelesen. Ich verwende nun den einen oder anderen HTML-Baustein, der sich dort einfügen lässt. Da Apple kein Javascript zulässt bin ich mit einer Infobox, die ich gern über Mouseover aktiviert haben wollte, bei CSS gelandet. 80% der Seite waren Ende November fertig, seit dem quäle ich mich mit diesem Mouseover-Problem herum. Mit einer Grafik hat es nicht zuverlässig funktioniert. Inzwischen habe ich eine Infobox, die - zwar mit einigen Kompromissen von der Optik - funktioniert, aber leider nicht in IE. Safari und Firefox funktionieren einwandfrei. Ich habe einen Mouseover-Bereich, der über einer Taste liegt. In diesem ist ein Zeichen eingebettet, ohne dieses Zeichen (Pfeil) funktioniert der ganze Mouseover-Bereich nicht, mit funktioniert er in den besagten Browsern, IE reagiert aber nur, wenn man direkt den Pfeil überfährt. Testen lässt sich das unter http://www.hape13.de/s90es.html - links oben die drei Tasten sollen beim Überfahren die Infobox bringen. Den Source-Code hänge ich unten an. Für mich wäre nur wichtig zu wissen, ob es eine Möglichkeit gibt, auch in IE die Maus über den gesamten vorderen Bereich der Taste einschließlich der darunter in der Grafik befindlichen Zahl reagieren zu lassen. Ich hoffe, ich habe mich auch für Fachleute einigermaßen verständlich ausgedrückt. ;-)

Vielen Dank schon einmal,

Gruß hp.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<style type="text/css">

</style>
</head>
<body>

<div id="links">
<a href="http://88.198.8.78/UBB/showflat.php?Cat=0&Board=synth&Number=212576&Searchpage=17&Main=212576&Words=hape13&topic=&Search=true#Post212576/ target="_blank" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">→<span><em>Pad-Sounds spielen - Eine kleine Betrachtung zum Einsatz von Flächen-Sounds am S90 ES.</em></span></a>
</div>

</body>
</html>

von **Laus** » 02.03.2010, 10:24

Hallo

Da Apple kein Javascript zulässt

Nun wenn ich mir deine Seite so ansehe besteht sie zum größten teil aus Javascript.

Wieso hast du die Infoboxen als iframe eingefügt? Das ist nicht nötig und kompliziert das ganze nur.
Benutze statt dessen so etwas, ist eine reine CSS Lösung und funktioniert mit jedem Browser. Position und aussehen kannst Du ganz leicht im CSS Code anpassen und den Pfeil brauchst Du dann auch nicht mehr.

Gruß Xaver

von **hape13** » 02.03.2010, 14:49

Hallo Xaver,

vielen Dank für den Tipp. Ich werde ein wenig damit herumexperimentieren.

Mein großes Problem ist, dass alle immer meinen Hinweis überlesen, dass ich keinen blassen Schimmer habe. Was ist ein iframe? Wie fügt man das ein? Wo ist da Javascript enthalten?

Ganz ehrlich - ich weiß nix. Kein Scherz.

Ich habe in gefühlt 1000 Foren herumgesucht, um eine Lösung zu finden. Der letzte Stand, der momentan noch aktiv ist, resultiert aus einer Beispiel-Seite. Diese hatte jedoch keinen passenden Beispiel-Code einzeln enthalten, so dass ich mir den Quelltext der kompletten Seite kopiert und nach dem Try&Error-Verfahren so lange ausgedünnt habe, bis nur noch diese Infobox übrig blieb. Das habe ich dann kosmetisch und inhaltlich meinen Vorstellungen angepasst.

Aber dieser Tooltip mit dem kleinen Fragezeichen und der Box gefällt mir gut. Habe eben einen kurzen Test aus iWeb exportiert, sah erst einmal so aus, als könnte es funktionieren.

Ich habe erst morgen wieder Gelegenheit, weiter daran zu feilen. Melde mich dann wieder, ob es geklappt hat, oder vielleicht mit einer Frage.

Nochmals vielen Dank,

Greetz,

hp.

von **hape13** » 03.03.2010, 15:45

...und den Pfeil brauchst Du dann auch nicht mehr.

Lieber Xaver,

heute in der Mittagspause hatte ich Gelegenheit, mit der Box etwas zu experimentieren. Ich habe meine Anpassungen in Optik usw. schon recht erfolgreich hinbekommen. Bis hierher schon mal vielen Dank. Einen Test in IE konnte ich noch nicht durchführen, momentan stolpere ich aber über ein anderes Problem. Ich würde ja am liebsten meine gesamte Taste, auf der sich die Nummer befindet, auf den Mouseover-(oder Hover?) Effekt reagieren lassen. Von dieser Wunschvorstellung habe ich mich bereits verabschiedet. Mit meiner bisherigen Lösung konnte ich den Bereich um den Pfeil herum, der auf die Maus reagieren sollte, mit Größenangaben in px versehen. Mindestens Safari und Firefox haben jedenfalls genau auf dieses definierte Feld reagiert. IE eben nicht, sondern nur auf den Pfeil. Das ist jetzt in Safari genau so. Die Maus reagiert nur auf den Text "Tooltip" bzw. den Pfeil, den ich stattdessen wieder eingesetzt habe. Kann man da noch etwas machen? Ich wollte meine Zahl auf der Taste belassen und mindestens diesen vorderen Bereich der Tasten auf die Maus reagieren lassen. Statt dem Text oder dem Pfeil Leerzeichen funktionieren nicht, dann reagiert die Maus überhaupt nicht. Was mir an der ganzen Geschichte ausgesprochen positiv gefällt ist, dass mehrere solcher Tooltips auch mit einer größeren Infobox dicht nebeneinander liegen und in iWeb sogar überlagern können, ohne dass das dann im Browser dazu führt, dass diese Überlagerungen die Anzeige der Boxen oder den Reaktionsbereich der Maus beeinflussen. Das war bei meinen anderen 276 Versuchen oft nicht der Fall bzw. hat dazu geführt, dass ich immer wieder nach einer anderen Lösung suchen musste. Gibt es eigentlich auch eine Möglichkeit, die Infobox fest irgendwo auf der Seite zu platzieren, unabhänig von der Position des "Auslösers"?

Vielen Dank noch einmal,

Gruß hp.

von **Laus** » 03.03.2010, 16:09

Werden denn die Schwarzen Tasten deiner Klaviatur auch noch mit links belegt?

von **hape13** » 03.03.2010, 23:27

Das kann schon sein, wenn die weißen eines Tages belegt sein sollten und ich keine Lust habe eine neue Seite aufzumachen. Aber ist auch nicht zwingend, Du hast sicher Grund, das zu fragen...?!?

Habe heute Abend noch schnell IE probiert - funktioniert bestens. Gäbe es z.B. die Möglichkeit, den "Reaktionstext" oder das -zeichen transparent zu formatieren? Das würde schon genügen, dann könnte ich einfach den Bereich, den ich auf die Maus reagieren lassen möchte, mit transparenten Zeichen überdecken. Oder statt Zeichen eine Grafik? Ich kenn' mich nicht aus, sorry...

Greetz,

hp.

Meine letzte Version von heute sieht so aus: http://www.hape13.de/textbox.html
(die zwei Pfeile im schwarzen Bereich - sind gleich belegt, wollte nur die Überdeckung der Bereiche damit testen)

Der Code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<style type="text/css">

</style>
</head>
<body>

<a class="tip" href="http://88.198.8.78/UBB/showflat.php?Cat=0&Board=synth&Number=208832&Searchpage=18&Main=208432&Words=hape13&topic=&Search=true#Post208583/ target="_blank" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">→ <span>Motif XS-Piano im S90 ES - Ein paar Tipps zu Piano-Sounds am S90 ES.</span></a>

</body>
</html>

von **Laus** » 04.03.2010, 13:10

Du hast sicher Grund, das zu fragen...?!?

Ich denke dabei daran die Klaviatur als normales Hintergrundbild zu nehmen und die Links über eine Liste darauf zu platzieren, was wesentlich einfacher zu realisieren ist.So wie eine normale Navigation eben. Denn jetzt sitzt ja jede Taste in einem eigenem Div was zu einer furchtbaren DIV Suppe führt und man dabei leicht den Überblick verliert.

von **hape13** » 04.03.2010, 14:05

Also die Tastatur ist ja bereits Hintergrund, zwar nur bedingt als Ganzes, aber die einzelnen Tasten z.B. mit den Zahlen lege ich als Grafik darüber. Diese Taste selbst erzeugt keinen Link sondern dieser ist in dem HTML-Baustein mit z.B. dem oben genannten Text, der wieder über der Taste liegt. Auslöser für die Maus ist dann der Pfeil in dem "href:..." ("→"). Ich kann es nicht fachlich besser ausdrücken, sorry.

Ich hatte in einer meiner Vorversionen bereits einen HTML-Baustein, der mehrere dieser "div's" enthielt, jeweils mit dem eigenen "href:". Ich vermute, dass Du in diese Richtung denkst, wenn ich es nicht falsch verstanden habe. Das hatte auch wunderbar funktioniert, über alle weißen Tasten im vorderen Bereich lag dieser gesamte Baustein und auf jeder Taste hatte ich eine Zahl als Auslöser. Es gab sogar den Vorteil, dass dann die Infobox immer an der selben Stelle erschien, nicht in Abhängigkeit von der Taste wie jetzt. Leider passte die Formatierung in unterschiedlichen Browsern nicht, die Differenz zwischen Safari und Firefox war genau ein px Fontgröße. (IE hatte ich nicht probiert) Ich hatte da mit jemandem vom Fach kurz Kontakt, der meinte gleich, die Darstellung solcher Dinge für alle Browser anzupassen sei sehr aufwändig. So bin ich wieder bei einem Baustein pro Taste, dann kann ich die Position genau bestimmen.

Hast Du noch eine Idee, den Pfeil unsichtbar zu machen, oder doch die Taste als Auslöser für den Hover-Effekt zu aktivieren? Ich hatte schon versucht, meine auf der Grafik befindliche Zahl mit solchen Klammern zu umgeben (〈〉) aber die Leerzeichen dazwischen werden ignoriert. Und einen Unterstrich konnte ich in den Unicode-Listen auch nicht finden, den ich hätte als Leerzeichenersatz nehmen können.

Wenn das alles nicht geht, muss ich eine schlichtweiße Taste nehmen und Text bzw. Zahl aus dem HTML-Baustein einfach darüber legen. Ist an dieser Stelle vor dem "<span>" die Formatierung des Textes möglich, um z.B. die Zahl wenigstens in der Größe anzupassen?

Na ja, ich werde selbst noch ein wenig Try & Error-Experimente unternehmen, darin habe ich jede Menge Routine zur Zeit.

Vielen Dank und Gruß

hp.

von **hape13** » 04.03.2010, 14:20

Ich hab's !!! :wink:

"&emsp;" statt eines Zeichens funktioniert! Ich hoffe nur, auch in allen Browsern. Dann wäre mein Problem gelöst!

Danke noch einmal für die Mühe,

Greetz,

hp.

von **hape13** » 07.03.2010, 17:43

Hallo zusammen,

habe nun doch (auch) ein Problem, dass nicht in allen Browsern meine Mouseover's funktionieren.

Z.B. in Opera (Mac) werden die Infoboxen nicht angezeigt:

http://www.hape13.de/s90es.html

Safari, Chrome, Firefox (Mac) und IE8 (WIN XP) laufen. (Bei letzterem wird allerdings auf dem gesamten Bereich, auf dem die Infoboxen angezeigt werden, ein seltsamer Cursortyp, ähnlich einem "I" mit Serifen, angezeigt.)

Hat dazu jemand eine Idee?

P.S.: das Beispiel "Tooltip" von dieser Seite läuft in Opera auch. Ich habe aber schon Stunden damit verbracht, Vergleiche anzustellen - komme keinen Schritt weiter. Habe nun doch alle "Div's" in einen "Suppentopf" geworfen und dachte erst, es liegt daran. Wenn ich es aber auf eines reduziere, ändert sich auch nichts.

Danke und Greetz,

hp.

Hier der Text:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<style type="text/css">

</style>
</head>
<body>

<a class="tip" href="http://88.198.8.78/UBB/showflat.php?Cat=0&Board=synth&Number=208832&Searchpage=18&Main=208432&Words=hape13&topic=&Search=true#Post208583/ target="_blank" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">&ensp;&emsp;&emsp;<span>Motif XS-Piano im S90 ES - Ein paar Tipps zu Piano-Sounds am S90 ES.</span></a>

<a class="tip1" href="http://88.198.8.78/UBB/showflat.php?Cat=0&Board=synth&Number=212576&Searchpage=17&Main=212576&Words=hape13&topic=&Search=true#Post212576/ target="_blank" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">&ensp;&emsp;&emsp;<span>Pad-Sounds spielen - Eine kleine Betrachtung zum Einsatz von Flächen-Sounds am S90 ES.</span></a>

<a class="tip2" href="http://88.198.8.78/UBB/showflat.php?Cat=0&Board=synth&Number=249068&Searchpage=5&Main=249014&Words=hape13&topic=&Search=true#Post249068/ target="_blank" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">&ensp;&emsp;&emsp;<span>Bläser- und Akustik-Piano am S90 ES.</span></a>

</body>
</html>

CSS-Mouseover

CSS-Mouseover

Re: CSS-Mouseover

Re: CSS-Mouseover

Re: CSS-Mouseover

Re: CSS-Mouseover

Re: CSS-Mouseover

Re: CSS-Mouseover

Re: CSS-Mouseover

Re: CSS-Mouseover

Re: CSS-Mouseover

Ähnliche Beiträge zu "CSS-Mouseover"

Wer ist online?