Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:popup [16.01.2015 16:55] – Doppelklammer als Option ergänzt admin
+++ de:create:popup [19.01.2016 17:48] – [Tooltip bei Berührung II] soz13hud
@@ Zeile 27: / Zeile 27: @@
-===== Tooltop bei Berührung II =====
+Facebook ermöglicht es mir, mich über meinen <span title="Ein &quot;**News-Feed**&quot; ist ein Nachrichtenstrom, der sich aus bestimmten Quellen speist (=engl. to feed). Welche Quellen das sind, bestimmen Sie durch die Vernetzungen, die Sie eingehen. Als Synonym sind Ihnen wahrscheinlich die Begriffe Chronik und Startseite bekannt." style="border-bottom: 1px dotted">News-Feed</span> über Nachrichten zu informieren, die mich interessieren.
-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 ''style''-Attribut visuell hervorgehoben werden.
+===== Information per Mausklick =====
-<code html>
+Der Inhalte einer Website (und damit einer Fragebogen-Seite) kann mittels JavaScript dynamisch verändert werden. Eine sehr einfache Veränderung ist das Ein- und Ausblenden von Inhalten. Die Information wird also regulär eingebunden, bleibt aber zunächst unsichtbar.
-<p>Hier ist der Text mit einem <span title="Ein Wort, dessen Bedeutung nicht direkt ersichtlich ist" style="border-bottom: 1px dotted">erklärungsbedürftigen</span> Wort.</p>
-</code>
-Wenn die Information direkt in einem Item erscheinen soll, setzen Sie das ''<span>''-Tag einfach direkt in den Itemtext an die passende Stelle.
+Wenn Sie die nachfolgenden Lösungen verwenden, benötigen Sie [[:de:glossary#javascript|JavaScript]] -- die Umsetzung wird also ein wenig anspruchsvoller, aber dafür haben Sie volle Kontrolle darüber, wie und wann die Information angezeigt wird.
-<code html>
-Bei Sonnenschein bin ich lieber <span title="Mit &quot;draußen&quot; ist gemeint, dass Sie sich außerhalb geschlossener Räume aufhalten" style="border-bottom: 1px dotted">draußen</span> als dass ich an Onlinebefragungen teilnehme.
-</code>
-**Hinweis:** Die Darstellung der ''title''-Information obliegt dem Browser des Teilnehmers. Sie haben keinen Einfluss darauf, wie schnell die Information angezeigt wird und in welcher Formatierung.
+==== Umsetzung ====
+Speichern Sie folgenden HTML-Code als Textbaustein und ziehen sie diesen in die Fragebogen-Seite. Die eigentliche Information müssen Sie natürlich selbst eintragen. Formatierungen mit HTML sind möglich.
-===== Information per Mausklick =====
+**Hinweis:** Der folgende Code eignet sich nur zur Anzeige eines Info-Knopfes pro Fragebogenseite. Code für mehrere Knöpfe s. unten.
-Der Inhalte einer Website (und damit einer Fragebogen-Seite) kann mittels JavaScript dynamisch verändert werden. Eine sehr einfache Veränderung ist das ein- und ausblenden von Inhalten. Die Information wird also eingebunden, bleibt aber zunächst unsichtbar.
-Wenn Sie die nachfolgenden Lösungen verwenden, benötigen Sie [[:de:glossary#javascript|JavaScript]] -- die Umsetzung wird also ein wenig anspruchsvoller, aber dafür haben Sie weitgehende Kontrolle darüber, wie und wann die Information angezeigt wird.
-==== Umsetzung ====
-Speichern Sie folgenden HTML-Code als Textbaustein und ziehen sie diesen in die Fragen-Seite. Die eigentliche Information müssen Sie natürlich selbst eintragen. Formatierungen mit HTML sind möglich.
 <code html>
@@ Zeile 90: / Zeile 78: @@
 </script>
 </code>
 ==== Knopf frei platzieren ====
@@ Zeile 106: / Zeile 95: @@
 <img src="infobutton.png" onclick="buttonShow()">
 </code>
 ==== Wort berühren statt Knopf drücken ====
@@ Zeile 121: / Zeile 111: @@
 </code>
-Der JavaScript-Code ist derselbe wie oben und muss noch an den HTML-Code angehängt -- oder an beliebiger Stelle auf der Seite platziert -- werden.
+Der JavaScript-Code ist derselbe wie oben und muss noch an den HTML-Code angehängt oder an beliebiger Stelle auf der Seite platziert werden.
 ==== Benutzung speichern ====
-Sie können im Datensatz auch abspeichern, ob die Information angezeigt wurde. Dafür benötigen Sie eine interne Variable ([[variables|Variablen in oFb]]). Die Frage zur internen Variable fügen Sie über dem Info-Textbaustein in die Seite ein.
+Sie können im Datensatz auch abspeichern, ob die Information angezeigt wurde. Dafür benötigen Sie eine [[:de:create:questions:internal|interne Variable]]. Die Frage zur internen Variable ziehen Sie über dem Info-Textbaustein in die Seite.
 <code javascript>
@@ Zeile 144: / Zeile 135: @@
 }
 </code>
 ===== Mehrere Infos auf einer Seite =====
@@ Zeile 149: / Zeile 141: @@
 Die obigen Code-Beispiele können pro Seite jeweils nur eine Information einblenden. Falls Sie mehrere Info-Knöpfe auf einer Seite platzieren möchten, können Sie nachfolgenden Code verwenden.
-Den ersten Code speichern Sie als Textbaustein. Diesen Textbaustein fügen Sie einmal (an einer beliebigen Stelle __vor__ dem weiteren JavaScript-Code) in die Fragebogen-Seite ein.
+Den ersten Code speichern Sie als Textbaustein. Diesen Textbaustein fügen Sie __einmal__ (an einer beliebigen Stelle __vor__ dem weiteren JavaScript-Code) in die Fragebogen-Seite ein.
-<code html>
+<file html js_infobox.txt>
-<script src="../script/oFbGeneral.js" type="text/javascript"></script>
 <script type="text/javascript">
 <!--
@@ Zeile 162: / Zeile 153: @@
   function clickButton(evt) {
-    var sender = oFbGeneral.getSender(evt, this);
+    var sender = SoSciTools.getSender(evt, this);
     for (var i=0; i<buttons.length; i++) {
       if (sender == buttons[i]) {
@@ Zeile 178: / Zeile 169: @@
   function clickClose(evt) {
-    var sender = oFbGeneral.getSender(evt, this);
+    var sender = SoSciTools.getSender(evt, this);
     var ix = -1;
     for (var i=0; i<closes.length; i++) {
@@ Zeile 218: / Zeile 209: @@
     // Knopf aktivieren
-    oFbGeneral.attachEvent(button, "click", clickButton);
+    SoSciTools.attachEvent(button, "click", clickButton);
-    oFbGeneral.attachEvent(close, "click", clickClose);
+    SoSciTools.attachEvent(close, "click", clickClose);
   }
 }
@@ Zeile 225: / Zeile 216: @@
 //-->
 </script>
-</code>
+</file>
 Den zweiten Code wiederholen Sie für jeden Knopf inkl. Infobox. Dabei müssen Sie nur die HTML-Kennungen (''id'') von Knopf und Infobox anpassen. Also z.B. ''infoButton2'', ''infoBox2'' und ''infoClose2''.
@@ Zeile 254: / Zeile 245: @@
 </script>
 </code>
+==== 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="position: relative; left: -100px; top: -100px">
+  <img src="grosses-bild.jpg" id="large1" />
+</div>
+<img src="kleines-bild.jpg" id="image1" />
+<script type="text/javascript">
+<!--
+var info = new infoButton();
+info.registerInfo("image1", "large1", "large1");
+//-->
+</script>
+</code>
+Das obige Beispiel verzichtet auf einen gesonderten Knopf zum Schließen des großen Bildes -- ein Klick auf die vergrößerte Version reicht.
 ==== Info-Nutzung speichern ====
-Falls Sie speichern möchten, ob ein Info-Knopf angeklickt wurde, benötigen Sie zunächst interne Variablen. Legen Sie dazu im Fragenkatalog eine neue Frage vom Typ //interne Variablen// an. In dieser Frage legen Sie so viele Variablen (Items) an, wie Sie Info-Boxen überwachen möchten.
+Falls Sie speichern möchten, ob ein Info-Knopf angeklickt wurde, benötigen Sie zunächst interne Variablen. Legen Sie dazu im Fragenkatalog eine neue Frage vom Typ [[:de:create:questions:internal|interne Variablen]] an. In dieser Frage legen Sie so viele Variablen (Items) an, wie Sie Info-Boxen überwachen möchten.
 Ziehen Sie diese Frage __vor__ dem JavaScript-Code in die Fragebogen-Seite.
@@ Zeile 277: / Zeile 290: @@
 Die Variablen speichern dann, wie oft (beginnend mit 0) die Info-Box geöffnet wurde.
 ==== Öffnen bei Berührung ====
@@ Zeile 284: / Zeile 298: @@
 <code php>
     // Knopf aktivieren (Öffnen/Schließen per Klick)
-    oFbGeneral.attachEvent(button, "click", clickButton);
+    SoSciTools.attachEvent(button, "click", clickButton);
-    oFbGeneral.attachEvent(close, "click", clickClose);
+    SoSciTools.attachEvent(close, "click", clickClose);
     // Knopf aktivieren (Öffnen/Schließen per Mausberührung)
-    oFbGeneral.attachEvent(button, "mouseover", clickButton);
+    SoSciTools.attachEvent(button, "mouseover", clickButton);
-    oFbGeneral.attachEvent(button, "mouseout", clickClose);
+    SoSciTools.attachEvent(button, "mouseout", clickClose);
 </code>
-Beim zweiten Code entfernen Sie den Knopf zum schließen. Im folgenden Beispiel wird kein Knopf, sondern ein Text zum Anzeigen der Infobox verwendet:
+Beim zweiten Code entfernen Sie den Knopf zum Schließen. Im folgenden Beispiel wird kein Knopf, sondern ein Text zum Anzeigen der Infobox verwendet:
 <code html>