Differences
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. | ||
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
