Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:images [16.12.2014 23:44] – Aktualisierung 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 71: / Zeile 71: @@
   * Konvertieren Sie das Bild in den RGB-Modus (Graustufen-Bilder in den Modus Graustufen), falls es sich um ein indiziertes Bild handelt ([[#farbtiefe|Farbtiefe]]).
   * Skalieren Sie das Bild mit der Bildbearbeitung. Achten Sie darauf, dass Sie die Größe in Pixeln angeben (die Auflösung oder eine Größenangabe in Zentimeter ist für die Darstellung im Internet irrelevant).
+    * **Tipp:** Die Breite des Fragebogens können Sie im [[:de:create:layout|Fragebogen-Layout]] anpassen, falls Ihre Bilder bei entsprechender Skalierung nicht mehr ausreichend erkennbar sind.
+    * Auf kleinen Displays (z.B. auf dem Smartphone) wird das Layout automatisch schmaler ([[:de:create:smartphones]]), verwenden Sie ''%%<img src="..." style="max-width: 100%">%%'', damit ein eingebundenes Bild automatisch verkleinert wird.
   * Verwenden Sie die Funktion //Unscharf maskieren// (auch //Unscharf-Maske// oder //Schärfen//), wenn das Bild nach dem Skalieren matschig erscheint.
   * Reduzieren Sie die Farbtiefe, wenn es sich um eine Grafik handelt. Je weniger Farben Sie benötigen (es zählen v.a. die Schritte um 2er-Potenzen, also 255, 127, 63, 31, 15, 7, 3 oder 2 Farben), desto kleiner wird die Datei und desto schneller lädt der Fragebogen. Bei Fotos belassen Sie die Farbtiefe unverändert.
@@ Zeile 93: / 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 121: / 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 129: / 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 141: / Zeile 147: @@
 ===== Bilder als Antwortoptionen =====
-Man kann ein Bilder auch direkt in Fragen und Items einfügen. Auch dafür verwendet man das HTML-Tag ''<img>''.
+Man kann Bilder auch direkt in Fragen und Items einfügen. Auch dafür verwendet man das HTML-Tag ''<img>''.
 So kann man die //verbale Verankerung// in einer Skala mit Zwischenwerten grafisch gestalten oder in einer //Horizontalen Auswahl// zwischen Bildern auswählen lassen.
@@ Zeile 164: / 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>