Mouseover-Effekt bei Text

[Malachy]

Hallo,

wär hätte es gedacht, ich habe ein Problem :)

Kurz zur Erklärung: Ich bin Germanist und arbeite gerade an meiner Doktorarbeit. Die dreht sich um ein Online-Edition des Tagebuchs eines Schriftstellers. Bei der Darstellung seiner Einträge kommt es öfters vor, dass er Wörter verbessert hat, z.B. aus einem "B" ein "F" gemacht usw.

Normalerweise ist es so, dass bei Editionen in Buchform ein kompliziertes System am Ende des Textes wiedergegeben wird, wie der Autor wo und was geändert hat. Das könnte ich natürlich auch online so wiedergeben. Aber das ist ja eigentlich ziemlich umständlich.

Nun zu meiner eigentlichen Frage: Ist es möglich eine Art "Mouse-Over" Effekt auf einen einzelnen Text bzw. auf einen einzelnen Buchstaben anzuwenden, ohne das mit Hilfe von Bildern zu machen? Letztendlich soll es so aussehen, dass bei "Berührung" mit der Maus, wie beim obigen Beispiel aus dem "F" ein "B" wird, so dass der Nutzer weiß, was der Autor eigentlich zuerst geschrieben und dann "überschmiert" hat.

Ich habe hier im Forum bzw. im Netz gefunden, dass das bei dem Internet Explorer nur bei Links mit dem "a:hover" - Befehl geht, aber nicht bei normalem Text. Brauch ich dazu wirklich einen JavaScript-Code? Damit kenn ich mich nämlich überhaupt nicht aus ...

vielen Dank schonmal für eure Hilfe

[ChrisB]

Hi,

Nun zu meiner eigentlichen Frage: Ist es möglich eine Art "Mouse-Over" Effekt auf einen einzelnen Text bzw. auf einen einzelnen Buchstaben anzuwenden, ohne das mit Hilfe von Bildern zu machen?

Stichwort: CSS Infobox.

Letztendlich soll es so aussehen, dass bei "Berührung" mit der Maus, wie beim obigen Beispiel aus dem "F" ein "B" wird, so dass der Nutzer weiß, was der Autor eigentlich zuerst geschrieben und dann "überschmiert" hat.

Warum nicht <del>F</del><ins>B</ins>?

Ich habe hier im Forum bzw. im Netz gefunden, dass das bei dem Internet Explorer nur bei Links mit dem "a:hover" - Befehl geht, aber nicht bei normalem Text.

Nur IEs < 7 interpretieren die Pseudoklasse :hover noch nicht auf anderen Elementen als Links. Da muesste man ggf. mit JavaScript nachhelfen.

MfG ChrisB

[suit]

Warum nicht <del>F</del><ins>B</ins>?

hätt ich jetzt auch vorgeschlgen - per default ist das del ausgeblendet und das ins meinetwegen gekennzeichnet - beim mouseover wird das ins del als tooltip eingeblendet http://de.selfhtml.org/javascript/objekte/node.htm#previous_sibling@title=previousSibling wird hierbei interessant sein

[Malachy]

Erstmal vielen, vielen Dank für die Tipps von Euch.

Das Problem mit <del> und <ins> ist, dass das nach der Editionsordnung der Germanisten nicht so einfach ist, weil im Originaltext kein durchgestrichenes "B" steht und dann daneben das richtige "F", sondern beide Buchstaben quasi auf dem selben Fleck stehen. Klingt furchtbar kleingeistig, aber so sind die Germanisten manchmal :)

Daher müsste es schon eine Art Mouseover sein, die praktisch beide Buchstaben gleichwertig anzeigen kann. Leider hab ich die Lösung von "suit" mit dem Tooltip nicht ganz kapiert.

Falls das jetzt wirklich nur noch mit Java geht, bin ich natürlich aufgeschmissen, weil ich davon überhaupt keine Ahnung habe.

Sorry, wenn ich hier zu doofe Fragen stellen sollte.

[suit]

Das Problem mit <del> und <ins> ist, dass das nach der Editionsordnung der Germanisten nicht so einfach ist, weil im Originaltext kein durchgestrichenes "B" steht und dann daneben das richtige "F", sondern beide Buchstaben quasi auf dem selben Fleck stehen. Klingt furchtbar kleingeistig, aber so sind die Germanisten manchmal :)

ich kanns mir visuell nicht wirklich vorstellen, wie das gemeint ist :)

nach betrachtung von gunnars vorschlag hätte ich es so umgesetzt:
Ich bin ein Te<span class="korrektur" title="Korrektur von Hans Wurst, 30. Februar 2008"><del>s</del><ins>x</ins></span>t zur Verdeutlichung (alternativ ist natürlich auch <del>Test</del><ins>Text</ins> möglich, ich weiss nicht wie man korrekturen unter germanisten handhabt :D)

del ist meinetwegen rot, ins grün - beide buchstaben sind zu sehen, es ist auf einen blick zu erkennen, dass Test auf Text korrigiert wurde

  
   .korrektur del { color: red;   text-decoration: line-through; }  
   .korrektur ins { color: green; text-decoration: underline; }

die klasse ist zwar nicht notwendig (aber ich lass es mal fürs nächste beispiel ;) text-decoration ist auch in beiden fällen nicht notwendig, da die browser üblicherweise durchgestrichen und unterstrichen verwenden - aber ggf. tanzt eine browser mal aus der reihe

alternativ das del ausblenden und nur das ins stehen lassen, das ins grün färben, beim mouseover wird das grüne ausgeblendet und das rote eingeblendet

   .korrektur {  
    position: relative;  
   }  
  
   .korrektur del {  
    color: red;  
    text-decoration: line-through;  
    display: none;  
    position: absolute;  
    top: -1.15em;  
    right: -0.45em;  
    font-size: 0.75em;  
    border: 1px solid red;  
    padding: 1px;  
    background: #FFDDDD;  
    text-decoration: none;  
    white-space: no-wrap;  
   }  
   .korrektur ins {  
    color: green;  
    text-decoration: underline;  
    cursor: help;  
   }  
  
   .korrektur:hover del {  
    display: block;  
   }  
  

Daher müsste es schon eine Art Mouseover sein, die praktisch beide Buchstaben gleichwertig anzeigen kann. Leider hab ich die Lösung von "suit" mit dem Tooltip nicht ganz kapiert.

siehe oben, probier beides aus - idealerweise im firefox, im ie wirds nicht funktionieren, da der mit :hover am span-element nix anfangen kann

Falls das jetzt wirklich nur noch mit Java geht, bin ich natürlich aufgeschmissen, weil ich davon überhaupt keine Ahnung habe.

java brauchst du nicht, lediglich javascript - und das dürfte mit 3 bis 5 zeilen gegegessen sein ;)

[Gunnar Bittersmann]

@@ChrisB:

Stichwort: CSS Infobox.
--8<--
Warum nicht <del>F</del><ins>B</ins>?

Warum nicht <span><del>F</del><ins>B</ins></span>?

Dann braucht man keine Extra-Infobox.

Live long and prosper,
Gunnar

[Lido]

Hallo Malachy,

ich bin Webentwickler und wenn ich dein Problem verstehe möchtest du einfach einen Buchstaben ersetzen wenn der Benutzer mit der Maus drüberfährt (Mouse-Over). Ich kann dir sagen dass du dieses Problem mit allen Script-Sprachen wie PHP oder JavaScript hinbekommst - nicht aber mit HTML oder CSS. Du musst einen Wert ersetzen d.h. du musst zunächst prüfen ob bzw. wo der Buchtsabe auftaucht und dann ersetzen lassen.

[Gunnar Bittersmann]

@@Lido:

ich bin Webentwickler

Aua. Dann solltest du es eigentlich besser wissen nicht so einen Quatsch von dir geben.

und wenn ich dein Problem verstehe möchtest du einfach einen Buchstaben ersetzen wenn der Benutzer mit der Maus drüberfährt (Mouse-Over). Ich kann dir sagen dass du dieses Problem mit allen Script-Sprachen wie PHP oder JavaScript hinbekommst

?? Wie bitte soll PHP irgendwas mit mouseover zu tun haben?

nicht aber mit HTML oder CSS.

Aber klar doch. Wurde doch bereits im Thread erläutert.

Live long and prosper,
Gunnar

[suit]

Aber klar doch. Wurde doch bereits im Thread erläutert.

wobei deine möglichkeit (deren css teil du noch verschwiegen hast) leider wieder nicht mit dem internet exploder 6 funktioniert, da der hover auf span-elemente nicht versteht ;) aber die idee ist gut, das muss man dir lassen

wie bereits erwähnt, ich hätte auf das zusätzliche span element verzichtet und die sache mit javascript erledigt :)

[Malachy]

Erstmal vielen, vielen Dank für die Tipps von Euch.

Das Problem mit <del> und <ins> ist, dass das nach der Editionsordnung der Germanisten nicht so einfach ist, weil im Originaltext kein durchgestrichenes "B" steht und dann daneben das richtige "F", sondern beide Buchstaben quasi auf dem selben Fleck stehen. Klingt furchtbar kleingeistig, aber so sind die Germanisten manchmal :)

Daher müsste es schon eine Art Mouseover sein, die praktisch beide Buchstaben gleichwertig anzeigen kann. Leider hab ich die Lösung von "suit" mit dem Tooltip nicht ganz kapiert.

Falls das jetzt wirklich nur noch mit Java geht, bin ich natürlich aufgeschmissen, weil ich davon überhaupt keine Ahnung habe.

Sorry, wenn ich hier zu doofe Fragen stellen sollte.

[suit]

bitte nicht die diskussion unnötig zerpflücken ;)
doppelpost innerhalb des eigenen thread => https://forum.selfhtml.org/?t=179983&m=1188649