Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende ÜberarbeitungNächste ÜberarbeitungBeide Seiten der Revision | ||
de:create:popup [16.01.2015 17:20] – Aktualisiert admin | de:create:popup [19.01.2016 17:51] – [Tooltip bei Berührung I] soz13hud | ||
---|---|---|---|
Zeile 25: | Zeile 25: | ||
Das Info-Symbol und die Formatierung der Information können im Fragebogen-Layout mittels CSS-Anweisungen im HTML-Template angepasst werden. Dazu werden die CSS-Anweisungen im Bereich //Tooltip// aus dem Fragebogen-Stylesheet überschrieben. | Das Info-Symbol und die Formatierung der Information können im Fragebogen-Layout mittels CSS-Anweisungen im HTML-Template angepasst werden. Dazu werden die CSS-Anweisungen im Bereich //Tooltip// aus dem Fragebogen-Stylesheet überschrieben. | ||
- | |||
- | |||
- | ===== Tooltip bei Berührung II ===== | ||
- | |||
- | Eine weitere Lösung besteht darin, das HTML-Attribut //title// für zusätzliche Informationen zu verwenden. Hierbei wird ebenfalls eine kurze Information angezeigt, wenn der Teilnehmer mit der Maus über einem Wort verweilt -- allerdings erst nach einer kurzen Verzögerung. Das Wort selbst kann ggf. mittels '' | ||
- | |||
- | <code html> | ||
- | < | ||
- | </ | ||
- | |||
- | Wenn die Information direkt in einem Item erscheinen soll, setzen Sie das ''< | ||
- | |||
- | <code html> | ||
- | Bei Sonnenschein bin ich lieber <span title=" | ||
- | </ | ||
- | |||
- | **Hinweis: | ||
- | |||
===== Information per Mausklick ===== | ===== Information per Mausklick ===== | ||
Zeile 260: | Zeile 242: | ||
</ | </ | ||
</ | </ | ||
+ | |||
+ | |||
+ | ==== Bilder vergrößern ==== | ||
+ | |||
+ | Wenn Sie ein Bild als Knopf verwenden und beim Klick eine größere Version desselben Bilds anzeigen, können Sie mit der Funktion auch ein Bild vergrößern. Sie müssen sich lediglich um HTML-IDs für die Bilder und die Positionierung der großen Bildversion kümmern: | ||
+ | |||
+ | <code html> | ||
+ | <div style=" | ||
+ | <img src=" | ||
+ | </ | ||
+ | <img src=" | ||
+ | |||
+ | <script type=" | ||
+ | <!-- | ||
+ | var info = new infoButton(); | ||
+ | info.registerInfo(" | ||
+ | //--> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Das obige Beispiel verzichtet auf einen gesonderten Knopf zum Schließen des großen Bildes -- ein Klick auf die vergrößerte Version reicht. | ||