This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
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 ==== | ==== 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> | <code html> | ||
Line 269: | Line 269: | ||
</script> | </script> | ||
</code> | </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. | ||