This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
en:create:images [10.06.2018 20:17] – admin | en:create:images [26.04.2025 22:15] (current) – [Zoom function] amhof | ||
---|---|---|---|
Line 28: | Line 28: | ||
<code html> | <code html> | ||
<div style=" | <div style=" | ||
- | <img src=" | + | <img src=" |
</ | </ | ||
</ | </ | ||
Line 35: | Line 35: | ||
<code html> | <code html> | ||
- | <img src=" | + | <img src=" |
Please look closely at the image on the right. | Please look closely at the image on the right. | ||
Afterwards, please evaluate the image in light of the statements that can be read below. | Afterwards, please evaluate the image in light of the statements that can be read below. | ||
Line 43: | Line 43: | ||
<code html> | <code html> | ||
- | <img src=" | + | <img src=" |
Please look closely at the image on the right. | Please look closely at the image on the right. | ||
</ | </ | ||
Line 98: | Line 98: | ||
|Photo (JPG)\\ 85% Quality|Photo (JPG)\\ 15% Quality|Reduced to 8 Colors\\ (PNG)|Graphic (PNG)\\ | |Photo (JPG)\\ 85% Quality|Photo (JPG)\\ 15% Quality|Reduced to 8 Colors\\ (PNG)|Graphic (PNG)\\ | ||
+ | |||
+ | ==== File Name ==== | ||
+ | |||
+ | The widely used plug-in " | ||
Line 128: | Line 132: | ||
<code html> | <code html> | ||
< | < | ||
- | < | + | < |
< | < | ||
</ | </ | ||
Line 136: | Line 140: | ||
<code html> | <code html> | ||
< | < | ||
- | < | + | < |
This example demonstrates how an image can be positioned to the right of the text.</ | This example demonstrates how an image can be positioned to the right of the text.</ | ||
</ | </ | ||
Line 170: | Line 174: | ||
{{: | {{: | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Zoom function ===== | ||
+ | |||
+ | SoSci Survey provides CSS classes so that you can use a simple zoom function for images. To do this, add a “”< | ||
+ | |||
+ | <code html> | ||
+ | <a href="#" | ||
+ | </ | ||
+ | |||
+ | The above example enlarges an image both when it is touched with the mouse ('' | ||
+ | |||
+ | If the image should only react to the touch of the mouse, you can also simply add the class '' | ||
+ | |||
+ | <code html> | ||
+ | <img src=" | ||
+ | </ | ||
+ | |||
+ | The following classes are available: | ||
+ | |||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | |||
+ | For a different magnification, | ||
+ | |||
+ | <code css> | ||
+ | a.s2zoom img, | ||
+ | img.s2zoom { | ||
+ | | ||
+ | } | ||
+ | a.s2zoom: | ||
+ | a.s2zoom: | ||
+ | img.s2zoom: | ||
+ | | ||
+ | | ||
+ | } | ||
+ | </ | ||
+ | |||
+ |