Bild-Popup für Zusatzinformationen

Hat man einen Fließtext, in dem ein Begriff vorkommt, den man am besten mit einem kleinen Bild erklären kann, liegt es nahe, dieses Bild nur bei Bedarf anzuzeigen.

Ähnlich wie bei Infoboxen wird das zu erklärende Wort mit einer blauen, gestrichelten Linie untermalt, so dass der Anwender einen optischen Hinweis erhält, dass hier eine Erklärung lauert.

Natürlich unterstützt NOF solche Feinheiten nicht, aber mit etwas Aufwand kann man es ihm beibiegen :)

Im Prinzip kommen die gleichen Mechanismen zum Zuge, wie bei den Infoboxen, heißt, man muss an der gewünschten Stelle für das Bild-Popup einen Layoutbereich einfügen, in dem dann mittels HTML-Editor der Text und der Link auf das bei Mouse OVER anzuzeigende Bild eingefügt wird.

Für das beim Quickmill Saver eingebrachte Erklärungsbild habe ich, abweichend vom Beispiel für die Infobox, den kompletten Absatz im HTML Editor eingegeben. Auf diese Weise habe ich später bei der Darstellung keine Probleme mit Absatzabständen.

Im WYSIWYG Editor von NOF sieht man also nur den Layoutbereich, das kleine Rechteck links in der Mitte im nachfolgenden Bild:

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.

Im HTML Editor von NOF wird für diesen Layoutbereich dann folgendes eingegeben:

<p>
Was bleibt ist die Verbindung der Abschirmung des Verbindungskabels zwischen Arduino und Display. Die habe ich mit einer sogenannten
<a class="popuptext">DoL&uuml;- oder Dosenklemme
<span>
<img id="Bild1x" class="popuppicture box borderblur"  src="../assets/images/DoLu -Abzweigklemme_Rand.jpg">
</span>
</a>, einer einpoligen L&uuml;sterklemme mit nur einer Schraube, an ein kurzes St&uuml;ck Leitung, angel&ouml;tet am USB Stecker des Arduino, angeschraubt. Auch diese Verbindung sitzt fest, l&auml;sst sich nicht auseinander ziehen.

Trotzdem habe ich die Schraube nachgezogen und sie lie&szlig; sich tats&auml;chlich noch etwas fester anziehen. Bingo, die St&ouml;rungen der Anzeige sind verschwunden :)
</p>

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

Das für das Popup verwendete Bild muss manuell auf dem Server an die korrekte Position gebracht werden, der Pfad muss mit den Angaben im HTML Code übereinstimmen.

Insgesamt führt das dann im Browser zur gewünschten Darstellung des kompletten Textes und der blauen Unterstrichelung der beiden Trigger-Worte:

Zuletzt muss noch der passende CSS Code in der Formatdatei eingetragen werden, damit aus dem verborgenen Bild ein Bild-Popup wird.

Die CSS-Erweiterung enthält folgende Zeilen:

/* Bild popup per Mouse over (hover) */
<style type="text/css">
  a.popuptext { text-align:left; }
  a.popuptext { border-bottom: 2px dashed blue; text-decoration:none; }
  a.popuptext:hover { cursor:help; color:black; background:white;  }
  a.popuptext            .popuppicture { visibility:hidden; }
  a.popuptext:hover .popuppicture { visibility:visible; }

  .popuppicture {
    position:absolute;
    left:auto;
    margin-top:2.5em;
    margin-left:-9.5em;
    text-decoration:none; }
</style>
<!--[if IE 5]><style type="text/css">
  a.popuppicture span { display:none; }
  a.popuppicture:hover span { display:block; }
</style><![endif]-->

/*--------------- --------------- -------------- -------------- --------------
 * Rand um das Bild blurred
    --------------- --------------- -------------- -------------- -------------- */
.box {
  width:100%;
  height:100%;
  margin:20px auto;
}
.borderblur
{
    position:absolute;
    -webkit-box-shadow:0 0 30px black ;
        -moz-box-shadow:0 0 30px black ;
                  box-shadow:0 0 30px black ;
}
/* \Bild popup per Mouse over (hover) */

 

Die Einträge zu a.popuptext bestimmen das Format des angezeigten Trigger-Textes, die Einträge zu .popuppicture definieren ob und wie das Bild im Bezug zum Trigger-Text positioniert und dargestellt wird. Über die Einträge .box und .borderblur wird ein Schatten um das Bild gelegt, der es zur besseren Sichtbarkeit vom umgebenden Text abhebt.

Fährt man mit der Maus über eines der beiden gekennzeichneten Wort, wird das zugehörige Bild als Erklärung eingeblendet.