Differences

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

--- en:create:popup [23.04.2015 14:12]
admin [Click to Show Information]
+++ en:create:popup [07.09.2017 17:15]
autsch [Hover over a Word Instead of Pressing a Button]
@@ 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.