zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bei mouseover einzelne Zeile färben

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.02.2011, 22:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.06.2009
Beiträge: 8
Chrisso befindet sich auf einem aufstrebenden Ast
Standard Bei mouseover einzelne Zeile färben

Hallo zusammen!

Wie ganze <p>-Absätze zu färben sind, ist klar. Aber wie nur die einzelne Zeile gefärbt werden könnte, das ist das Rätsel.

Ich stand gerade vor der Aufgabe, den Text lesen zu wollen und da dort kaum Absätze drin sind, tu ich mir da sehr schwer beim Zeilensprung.

Und dann kam mir die Idee: es müsste doch möglich sein, eine Art "Lesehilfe" mit CSS und JS zu gestalten, dass die vertikale Mausposition abfragt und die jeweilige Zeile markiert.

Nun zur Frage: hat jemand eine Idee/Ansatz/Lösung oder kennt jemand, der von einem gehört hat der das mal auch gedacht hat?

Liebe Grüße
Chrisso
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.02.2011, 00:04
Benutzerbild von siliciumcarbid
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.10.2010
Ort: Basel
Beiträge: 115
siliciumcarbid befindet sich auf einem aufstrebenden Ast
Standard

-> coole Idee!
mal überlegen... In CSS gibt es ja ":hover", das du hinter jedem selector anhängen kannst (Vorsicht Kompatibilität). Aber da es für die einzelne Zeile keinen Befehl oder Selektor gibt, ist das wohl ohne JavaScript nicht zu lösen (javaScript kenne ich zu wenig .
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.02.2011, 05:02
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 28.01.2011
Beiträge: 338
Webcoder sorgt für eine eindrucksvolle AtmosphäreWebcoder sorgt für eine eindrucksvolle Atmosphäre
Standard

Hi Chrisso

aus der logischen Überlegung heraus, sage ich die Sache geht gar nicht.

1.) JavaScript müsste wissen wo die Zeile anfängt und wo sie endet. Dieses geht jedoch auch aus dem Quelltext nicht hervor, denn dort sind die Zeilenumbrüche ganz anders als auf der Website angezeigt.

2.) JavaScript müsste die Zeile genau ansprechen, wofür es meiner Meinung nach keinen Selector gibt.

So weit die technischen Hürden.

Weiter finde ich es eine Zumutung, dass der Besucher den Text Zeilenweise mit der Maus abfahren soll, nur um ihn zu lesen.

Ein weit aus bessere Lösung wäre, den Text gleich richtig zu formatieren. Also rechtzeitig neue Absätze und Zeilenumbrüche zu nutzen und so das Lesen zu vereinfachen und nicht ein komplettes Kapitel in einen Absatz zu stecken.


Falls du trotzdem nicht von deiner Idee abzubringen bist, wie wäre es wenn du den Cursor als halbtransparente Grafik machst und so die Schrift einfärbst?
Hie mal ein Link dazu: Selfhtml, Cursor mit eigener Grafik


Gruß
Webcoder
Mit Zitat antworten
  #4 (permalink)  
Alt 13.02.2011, 19:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.06.2009
Beiträge: 8
Chrisso befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Webcoder Beitrag anzeigen
2.) JavaScript müsste die Zeile genau ansprechen, wofür es meiner Meinung nach keinen Selector gibt.
Den Gedanken habe ich durch: Als obersten Punkt ein 1px in einem Div und das mit Javascript abfragen. Die Zeilenhöhe/Abstand ist durch das css bekannt und so müsste man "nur noch" die Mitte der Zeilen als Schwellwert (+ oder - (Zeilenhöhe+Zeilenabstand)/2) für den "Lesezeichenschatten" her nehmen.

Eh klar, der Text bleibt komplett sichtbar, nur die Zeile soll halt markiert werden. Stufenlos gar kein Thema, aber mit den Sprungwerten - ich für meinen Teil kriege das in JS wohl nicht hin. Hm.

Danke für euren Input!
LG
Chrisso
Mit Zitat antworten
  #5 (permalink)  
Alt 13.02.2011, 19:54
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Schau mal: http://jsbin.com/avuku/15

Aber irgendwie finde ich, dass diese Highlighter mit der Zeit recht nervig werden.
Mit Zitat antworten
  #6 (permalink)  
Alt 15.03.2011, 12:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.06.2009
Beiträge: 8
Chrisso befindet sich auf einem aufstrebenden Ast
Daumen hoch Juhuuuuuuuuu!

Danke für den Link, das ist so was von toll und funktioniert prima!
Klar, das Lineal muss schon optional zugeschaltet werden und auch dann nur ganz diskret

Noch mal DANKE!!!
Mit Zitat antworten
Antwort

Stichwörter
css, mouseover

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Tabellen Zeile einlesen, einzelne Zelle auslesen s3rial_ Javascript & Ajax 4 29.07.2010 12:14
Sitecheck für Urlaubsunterkunft in Kroatien Miso Site- und Layoutcheck 11 19.10.2008 21:53
Festanstellung bei der Xing AG als Web Developer (HTML/CSS) NEOX Offtopic 10 17.07.2008 18:11
Einzelne Zeile im Umbruch bei float vermeiden wuschba CSS 6 19.10.2006 17:36
Mouseover für ne ganze Zeile einer Tabelle... goldenboy CSS 2 01.10.2006 18:11


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:39 Uhr.