Text-Popup als Infobox

Dieser Effekt ist im gegebenen Zusammenhang eher als Spielerei zu verstehen, aber ich wollte das von Bildern bekannte Erklärungs-Popup bei Mouse HOVER auch für normalen Text implementieren.

Bei Texten redet man von Infoboxen, die bei Mouse OVER als Overlay über den vorhandenen Text angezeigt werden.

Auf der Seite von Ingo Turski habe ich eine Anleitung gefunden, wie so etwas prinzipiell unter ausschließlichem Einsatz von CSS zu bewerkstelligen ist. Jetzt musste ich die gefundene Lösung nur noch meinem Netobjects Fusion (NOF) schmackhaft machen ;)

Neu
Siehe Aktualisierung weiter unten.

Letztlich kommt man bei NOF nicht umhin, an der für das Popup vorgesehenen Position im WYSIWYG Editor einen eigenen, leeren Layout-Bereich einzubauen und die letzte Zeile mit dem Text vor dem zu erklärenden Wort, sowie den passenden HTML Code über den HTML Editor einzugeben, weil NOF es nicht erlaubt, HTML Code in seine Standardblöcke einzufügen.

Für das bei der PV-Anzeige verwendete Beispiel, die Erklärung des WAF Woman Acceptance Factor, auch Wife Acceptance Factor
Der Woman Acceptance Factor ist umgekehrt proportional zum möglichen Konflikt, der aus den unterschiedlichen Ansichtsweisen der Ehepartner resultiert. Je niedriger der WAF, desto mehr Überredungsarbeit muss aufgebracht werden, oder desto mehr Konflikt resultiert aus der Anschaffung oder dem Projekt. (Quelle: Wikipedia) aus Wikipedia

muss im HTML Editor von NOF für den schmalen Layout-Bereich im Bild oben folgendes eingegeben werden:

<p>Erstens ist das meines Erachtens recht gut gel&ouml;st, zweitens hat diese Form der Pr&auml;sentation einen hohen
<a class="infobox" >WAF<span>
<b>Woman Acceptance Factor</b>, auch <b>Wife Acceptance Factor</b><br>
Der Woman Acceptance Factor ist umgekehrt proportional zum m&ouml;glichen Konflikt, der aus den unterschiedlichen Ansichtsweisen der Ehepartner resultiert. Je niedriger der WAF, desto mehr &Uuml;berredungsarbeit muss aufgebracht werden, oder desto mehr Konflikt resultiert aus der Anschaffung oder dem Projekt. (Quelle: Wikipedia)</span></a> :)</p>

Die Zeile mit dem Text vor und nach dem eigentlichen Infobox-Trigger “WAF”, muss ebenfalls im HTML Editor eingebaut werden, da sonst das Triggerwort immer in eine neue Zeile positioniert wird.

Man beachte, dass deutsche Umlaute mittels HTML-Code eingegeben werden müssen.

Zum Bild oben:
Hinter der letzten Zeile vor dem Triggerwort muss ein weicher Zeilenvorschub eingegeben werden. Weiterhin darf hinter dem eingefügten Layout-Bereich kein Zeilenvorschub eingefügt werden, um den Abstand zum nachfolgenden Text so klein wie möglich zu halten. Leider ergibt sich durch das Einfügen eines Layout-Bereichs ober- und unterhalb ein größerer Abstand, ein Absatz wird also aufgebrochen. Die Breite des Layout-Bereichs im WYSIWYG Editor ist unerheblich, wichtig ist, dass die Höhe so klein wie möglich eingestellt wird, das bestimmt im wesentlichen im Browser den Abstand zum nachfolgenden Absatz. Aber aufpassen, dass man den Bereich noch mit der Maus selektieren kann, sonst sind Änderungen nicht mehr möglich, man käme um ein Löschen und neu anlegen nicht herum.

---

Aktualisierung
Die Notwendigkeit, Teile des umfassenden Textes ebenfalls in den HTML Code verlagern zu müssen, damit keine unnötig großen Textabstände generiert werden, hat mir keine Ruhe gelassen und ich habe nach einer Alternative gesucht, die es erlaubt, den notwendigen HTML Code in die Seite einzubringen, ohne allzu umfangreiche Textänderungen erforderlich zu machen und zusätzlich möglichst nur das eigentliche Triggerwort selbst in HTML verlagern zu müssen.

Durch Einbau einer senkrechten Linie direkt vor dem Triggerwort kann das realisiert werden:

Die Linie wird mit der Maus gezeichnet, dabei die SHIFT-Taste festhalten, damit sie exakt senkrecht platziert wird. Die Formatierung erfolgt in dieser Weise:

Die Linienstärke nicht zu klein wählen, damit sie im Editor noch selektiert werden kann, 2 ist ok. Die Farbe wird auf Weiß eingestellt (wenn der Seitenhintergrund Weiß ist), Umriss wird angehakt, alle anderen Parameter bleiben unverändert.

Im HTML Editor für die Linie wird dann nur noch das eigentliche Triggerwort und der PopUp-Text mit der passenden Formatierung angegeben:

<a class="infobox">WAF<span>
<b>Woman Acceptance Factor</b>, auch <b>Wife Acceptance Factor</b><br>
Der Woman Acceptance Factor ist umgekehrt proportional zum m&ouml;glichen Konflikt, der aus den unterschiedlichen Ansichtsweisen der Ehepartner resultiert. Je niedriger der WAF, desto mehr &Uuml;berredungsarbeit muss aufgebracht werden, oder desto mehr Konflikt resultiert aus der Anschaffung oder dem Projekt. (Quelle: Wikipedia)</span></a>

Zeilenumbrüche innerhalb der PopUp Box müssen manuell gesetzt werden (mittels <br>).

Deutsche Umlaute müssen mit HTML Code eingegeben werden, der zusätzliche Code wird hinter dem Object HTML eingefügt.

Der Vorteil dieser Variante: Der Text um das Triggerwort herum ist im Editor sichtbar, man stochert bei eventuellen Änderungen nicht im Nebel. Außerdem gibt es keine Formatierungsprobleme im Textfluss, wie das bei der Variante mit eigenem Layoutbereich auftritt.

---

Damit das Ganze dann zu einem Popup Fenster wird, muss natürlich noch das passende CSS in die Formatdatei eingefügt werden.

Die CSS-Erweiterung enthält folgende Zeilen zusätzlich:

/* Erklärung popup per Mouse over (hover) */
  a.infobox span { text-align:left; width:35em; }
  a.infobox { border-bottom: 1px dashed blue; text-decoration:none; }
  a.infobox:hover { cursor:help; color:black; background:white; }
  a.infobox span { visibility:hidden; position:absolute; left:auto;
    margin-top:.5em; padding:1em; text-decoration:none; }
  a.infobox:hover span, a.infobox:focus span, a.infobox:active span {
    margin-top:.5; padding:.5;
    text-align:left; width:35em;
    visibility:visible; auto:.5em;
    border:1px solid ; color:black; background:Gainsboro;
    border-radius: 10px;
    padding-top: .5;
    padding-left: .8em;
    padding-right: .8em;
    padding-bottom: .8em;
    font-family: Calibri,sans-serif; text-decoration: none;
    background-color: rgbd-color: rgb(255,255,204);
    background-repeat: no-repeat; vertical-align: top;  font-size: 10pt;  }

/*[if IE 5]*/
  a.infobox span { display:none; }
  a.infobox:hover span { display:block; }
/*[endif]*/
/* \Erklärung popup per Mouse over (hover) */

Das Resultat sieht man auf der Seite über die PV-Anzeige.