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 [07.09.2017 17:15] – [Hover over a Word Instead of Pressing a Button] autsch
@@ 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 helps if the participant can access additional information((a short piece of text like this one here)) if needed.
 **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.
@@ Line 120: / Line 120: @@
 ==== 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 269: @@
 </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.