Differences

This shows you the differences between two versions of the page.

--- en:create:popup [01.02.2015 19:46] – alexander.ritter
+++ en:create:popup [13.07.2021 11:19] – [Click to Show Information] sophia.schauer
@@ Line 1: / Line 1: @@
 ====== Click to Show Information ======
-Sometimes it helps if the participant can access additional information ((a short piece of text like this one here)) if needed.
+Sometimes it is helpful if the participant can fade in additional information((a short text like this one)) if needed. Depanding on the application there are differnt solutions:
+  - Individual words are most easily explained with a tooltip (see below)
+  - When it comes to displaying text passages on a mouse click, use the [[:en:create:accordion|accordion function]]
+  - If you want to make an extensive text available as additional information, you can open it using ''[[:en:create:functions:textlink|textlink()]]'' in a separate popup window.
+In addition, you can use [[:en:create:javascript|JavaScript]] to display text, information, items or entire questions at the respondent's click. You can also save if the information got clicked.
-**Tip:** More detailed information can also be opened in a separate pop-up window by using ''[[:en:create:functions:textlink|textlink()]]''. However, you can never be sure if the participant will be able find their way back to the questionnaire.
 ===== Hover-Over Tooltip I =====
@@ Line 120: / Line 125: @@
 ==== Hover over a Word Instead of Pressing a Button  ====
-By slightly modifying this you can get rid of having to click, and therefore info box will be displayed when the user moves over a word:
+By slightly modifying this you can get rid of having to click, and therefore the info box will be displayed when the user moves over a word:
 <code html>
@@ Line 269: / Line 274: @@
 </script>
 </code>
+==== Enlarge an Image ====
+Using an image as button, and a larger version of the image as "information", you may create a zoom feature. Simply give the images some HTML ID and take care of the larger version's placement.
+<code html>
+<div style="position: relative; left: -100px; top: -100px">
+  <img src="imageA.large.jpg" id="large1" />
+</div>
+<img src="iamgeA.jpg" id="image1" />
+<script type="text/javascript">
+<!--
+var info = new infoButton();
+info.registerInfo("image1", "large1", "large1");
+//-->
+</script>
+</code>
+There is no distinct close button in the example, above -- the larger version itself may be clicked to close the zoom.