Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:images [22.04.2017 15:51] – [Bilder skalieren] admin
+++ de:create:images [08.11.2024 15:22] (aktuell) – [Zoom-Funktion] admin
@@ Zeile 22: / Zeile 22: @@
   - Anschließend muss das Bild in den Fragebogen eingebunden werden. Hier gibt es mehrere Möglichkeiten - je nach Einsatzzweck.
     * Das Bild taucht unter **Fragebogen zusammenstellen** rechts unten auf. Hier können Sie es einfach in den Fragebogen hineinziehen (Drag & Drop).
-    * Wenn Sie das Bild unter **Bilder und Mediendateien** anklicken, wird Ihnen der Dateiname angezeigt sowie ein HTML-Code zum Einbinden des Bildes. Diesen HTML-Code können Sie in Textbausteinen, in Fragen, Items, u.s.w. verwenden.
+    * Wenn Sie das Bild unter **Bilder und Mediendateien** anklicken, wird Ihnen der Dateiname angezeigt sowie ein HTML-Code zum Einbinden des Bildes. Diesen HTML-Code können Sie über all dort eingeben, wo Sie Text eingeben können. Zum Beispiel in Textbausteinen (sofern für die Darstellung "HTML-Code" ausgewählt wurde), im Fragetext, in den Instruktionen einer Frage oder im Text von Items. Auch kann man unter "Fragebogen zusammenstellen" ein Element "HTML-Code" verwenden und dort HTML-Code eingeben.
 Wenn Sie ein Bild mittels HTML-Code einbinden, können Sie die Platzierung genauer justieren. Folgender HTML-Code zeigt das Bild ''bild.jpg'' mittig an und lässt oben/unten 40 Pixel Abstand zu anderen Inhalten.
@@ Zeile 28: / Zeile 28: @@
 <code html>
 <div style="text-align: center; margin: 40px 0">
-  <img src="bild.jpg" alt="Bild einer Frau">
+  <img src="bild.jpg" alt="Bild einer Frau" style="max-width: 100%;">
 </div>
 </code>
@@ Zeile 35: / Zeile 35: @@
 <code html>
-<img src="bild.jpg" alt="Bild einer Frau" style="float: right; margin-left: 10px">
+<img src="bild.jpg" alt="Bild einer Frau" style="float: right; margin-left: 10px; max-width: 100%;">
 Bitte sehen Sie das Bild auf der rechten Seite genau an.
 Beurteilen Sie das Bild anschließend anhand der Aussagen, die Sie unten lesen.
@@ Zeile 43: / Zeile 43: @@
 <code html>
-<img src="bild.jpg" alt="Bild einer Frau" class="right">
+<img src="bild.jpg" alt="Bild einer Frau" class="right" style="max-width: 100%;">
 Bitte sehen Sie das Bild auf der rechten Seite genau an.
 </code>
@@ Zeile 95: / Zeile 95: @@
 |{{exp.images.rgb.jpg?nolink|Foto (JPG), 85% Qualität}}|{{exp.images.rgb.compressed.jpg?nolink|Foto (JPG), 15% Qualität}}|{{exp.images.rgb.palette.png?nolink|Foto auf 8 Farben reduziert (PNG)}}|{{exp.images.cartoon.png?nolink|Grafik (PNG),  8 Farben}}|{{exp.images.graph.png?nolink|Grafik (PNG), 8 Farben}}|
 |Foto (JPG)\\ 85% Qualität|Foto (JPG)\\ 15% Qualität|Auf 8 Farben\\ reduziert (PNG)|Grafik (PNG)\\  8 Farben|Grafik (PNG)\\ 8 Farben|
+==== Dateiname ====
+Der weit verbreitete PlugIn "uBlock Origin" identifiziert bestimmte Dateinamen als Werbeanzeigen (Advertising). Vermeiden Sie Dateinamen, die mit einem "AD" beginnen (z.B. "AD1_new.jpeg"). Testen Sie Ihren Fragebogen in unterschiedlichen Browsern und mit aktiven Werbe-Blockern.
@@ Zeile 123: / Zeile 127: @@
 <code html>
 <p>Text über dem Bild.</p>
-<p><img src="bild.gif" alt="Rosa Elefant"></p>
+<p><img src="bild.gif" alt="Rosa Elefant" style="max-width: 100%;"></p>
 <p>Text unter dem Bild</p>
 </code>
@@ Zeile 131: / Zeile 135: @@
 <code html>
 <h1>Willkommen</h1>
-<p><img src="https://www.soscisurvey.de/homepage/sosci.logo.png" alt="SoSci Survey" class="right">
+<p><img src="https://www.soscisurvey.de/homepage/sosci.logo.png" alt="SoSci Survey" class="right" style="max-width: 100%;">
 Dies ist ein Beispieltext, der demonstriert, wie ein Bild
 rechts vom Text platziert werden kann.</p>
@@ Zeile 166: / Zeile 170: @@
 {{scr.images.labels.result.png?nolink|Bilder in Skalen-Beschriftung}}
+===== Zoom-Funktion =====
+SoSci Survey stellt CSS-Klassen zur Verfügung, damit Sie für Bilder eine einfache Vergrößerungsfunktion nutzen können. Ergänzen sie dafür ein ''<a>''-Tag mit der Klasse ''s2zoom2x''. Im Bild selbst legen sie per ''style''-Attribut eine Verkleinerung fest.
+<code html>
+<a href="#" class="s2zoom2x"><img src="example.jpg" alt="" style="width: 80px"></a>
+</code>
+Das obige Beispiel vergrößert ein Bild sowohl bei Berührung mit der Maus (''hover'') als auch wenn es angetippt oder angeklickt wird (''focus''), weil es auf Touch-Devices (z.B. auf dem Smartphone) die Möglichkeit nicht gibt, mit dem Mauszeiger über ein Bild zu fahren.
+Falls das Bild nur auf die Mausberührung reagieren soll, können sie auch einfach nur die Klasse ''s2zoom2x'' ergänzen:
+<code html>
+<img src="example.jpg" alt="" style="width: 80px" class="s2zoom2x">
+</code>
+Die folgenden Klassen stehen zur Verfügung:
+  * ''s2zoom2x'' -- 2-fache Vergrößerung
+  * ''s2zoom3x'' -- 3-fache Vergrößerung
+  * ''s2zoom4x'' -- 4-fache Vergrößerung
+Für eine andere Vergrößerung können Sie den folgenden CSS-Code anpassen und in Ihrem Layout verwenden.
+<code css>
+a.s2zoom img,
+img.s2zoom {
+    transition: transform .2s;
+}
+a.s2zoom:focus img,
+a.s2zoom:hover img,
+img.s2zoom:hover {
+    transform: scale(1.6);
+    box-shadow: -0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.4);
+}
+</code>