Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

Wort hinterlegen





Frage

Hallo Leute, Ich suche eine elegante Lösung (möglichst CSS) für folgendes Problem: Ich benutze Fachwörter in Texten, die beim Drüberfahren mit der Maus erklärt werden sollen. Beispiel: [code] Um nicht ständig die <span title="Methode, um das Sinken beim Gleitschirm zu erhöhen"> Ohren anlegen </span> zu müssen ... [/code] Ich würde gerne das Fachwort mit einem schwach kontrastierenden Hintergrund versehen. Das ginge natürlich mit einer festen Farbvergabe, deren Farbe man für die jeweilige Stelle händisch ermitteln müsste. Das kann ich, kein Problem. Ich hätte es aber lieber so, dass es eine Generallösung für jede beliebige Hintergrundfarbe gäbe, da dieses Feature für hunderte von Seiten mit ganz unterschiedlichen Hintergrundfarben geplant ist. Also eine definierte Abweichung von der Hintergrundfarbe. Es würde mir reichen, wenn es eine Lösung für MSIE und Firefox gäbe, notfalls auch nur für MSIE. Gruß Manfred

Antwort 1 von Friedel

Geht es darum, um einen bestimmten Betrag von der Hintergrundfarbe der aktuellen Seite ab zu weichen? Oder gibt es Hintergrundbilder, und es soll um einen Bestimmten Betrag vom Farbwert an der aktuellen Stelle abgewicjhen werden? Ersteres ist möglich, letzters nicht. Sowas sollte problemlos in IE ab Version 5, Opera ab Version 6, Mozilla ab Version 1, Netscape ab Version 6 gehen. Aber alles nur mit aktiviertem JavaScript.

Antwort 2 von abschweb

@Friedel

Ist mir klar, wo dies Feature über einem Hintergrundbild auftauchen sollte, gehts nur mit Handarbeit. Lassen wir das mal beiseite.
Also nur Hintergrundfarbe.
Hast du eine Idee?

Gruß
Manfred

Antwort 3 von rfb

für alle span-Bereiche die Hintergrundfarbe abfragen und ein bisschen ändern.
Theoretisch machbar. Allerdings erhältst du keinen Ausgangswert, wenn der span-Bereich einfach den Farbwert des Elternelements übernimmt (was die Regel sein dürfte). Dann könntest du noch mit parentnode auf das Eltern-(oder Großeltern-)element zugreifen.

Allerdings ist für deinen Fall folgendes üblicher:

span[title] { border-bottom:thin dotted; }


Ich glaub Firefox hat das so sogar in den CSS-Voreinstellungen (vielleicht nicht für span, aber zumindest für acronym&Co).

Antwort 4 von abschweb

Es soll exakt so aussehen (ich teste mit IE und Firefox) wie in

http://www.abschweb.de/aktuell/190605.htm

und zwar Feinversion (klicke auf den Schriftzug "abschweb").
Es geht also darum, ob es eine weniger aufwändige Lösung gibt. An der Optik mache ich keine Abstriche, lieber löse ich es so wie dort, Seite für Seite.

In der Grobversion werde ich die mittelgraue Hinterlegung beibehalten.

Gruß
Manfred

Antwort 5 von rfb

Zitat:
klicke auf den Schriftzug "abschweb"
den finde ich dort nicht - meine Bequemlichkeits- und Sicherheitseinstellungen lassen aber auch nicht alle Spielereien zu und ohne die ist die Seite fast leer.

Antwort 6 von abschweb

@rfb

Verhinderst du Javascript?
Dann kannst du tatsächlich nicht viel sehen.
Für dich gäbe es die Sparversion (www.abschweb.de/spar/190605.htm),
aber dort ist das hier diskutierte Feature nicht vorgesehen.

Gruß
Manfred

Antwort 7 von Friedel

Natürlich muss die geänderte Hintergrundfarbe mit Hilfe der Hintergrundfarbe des Hintergrund bestimmenden Elternelementes berechnet werden. Wird die jeweile Hintergrundfarbe immer vom Body bestimmt? Oder kann sie auch durch Tabellen oder andere Blockelemente mit farbigem Hintergrund bestimmt werden? Es ist ja kein Problem, die Hintergrundfarbe des Body zu prüfen. Man kann auch für letzten Fall die bestimmende Hintergrundfarbe prüfen, aber es ist ungleich koplizierter. Letzteres geht mit DOM, JavaScript und CSS. Ersteres geht bohne DOM.

Antwort 8 von abschweb

Schön, ich kann eine geeignete Hintergrundfarbe aus der Haupthintergrundfarbe berechnen. Das ist mir klar. Der Wert steht dann als Javascript-Variable zur Verfügung. Wie bringe ich diesen Wert dann ins <span>, ohne dass ich den gesamten <span>-Ausdruck ins Javascript verpacken müsste (document.write ...), das würde mir nicht gefallen.

Gruß
Manfred

Antwort 9 von rfb

am einfachsten:


function spanfaerben(berechneterFarbwert) {
var a=eval(document.getElementsByTagName("span"));
for (var j=0; j<a.length; j++) {
if (a[j].title!="")
a[j].style.backgroundColor=berechneterFarbwert;
}
}


diese Funktion färbt nach Aufruf alle spans, die ein title-Attribut haben, in die Farbe "berchneterFarbwert"

Antwort 10 von abschweb

@rfb

Danke, die Lösung hat was!

Gruß
Manfred

Antwort 11 von Friedel

Das mit dem title-Attribut ist ne gute Idee. Ich hatte den Gedanken, für die Spans eine Klasse an zu legen, aber das ist durch diese Idee nicht notwendig.

Falls die Spans auch anderen Elementen mit Hintergrundfarbe vorkommen können (Table, Div, weitere Span o.ä.) müsstest du mit Hilfe des Node-Objektes ( http://de.selfhtml.org/javascript/objekte/node.htm) und parentNode (http://de.selfhtml.org/javascript/objekte/node.htm#parent_node) die Elementhirarchie jeweils bis zum Body durchkämmen und jedes Element aauf eine Hintergrundfarbe prüfen. Dann funzt es auch, wennndas bewußte Span in einer Tabelle oder einem Div mit farbigem Hintergrund ist.

Antwort 12 von abschweb

ja, Friedel, es kann vorkommen, aber so selten,
dass ich diese Fälle (maximal 2) mit Handarbeit lösen werde.
Es kommen ja auch Hintergrundfotos vor.
Aber 95 % der Fälle wären mit rfbs Lösung wohl abgedeckt!

Gruß
Manfred